diff --git a/CMakeLists.txt b/CMakeLists.txt index 34bbfa30..595689f8 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -75,7 +75,8 @@ set(SOURCE_LITEHTML src/render_flex.cpp src/render_image.cpp src/formatting_context.cpp -) + src/flex_item.cpp + src/flex_line.cpp) set(HEADER_LITEHTML include/litehtml.h @@ -138,6 +139,8 @@ set(HEADER_LITEHTML include/litehtml/master_css.h include/litehtml/string_id.h include/litehtml/formatting_context.h + include/litehtml/flex_item.h + include/litehtml/flex_line.h ) set(TEST_LITEHTML diff --git a/containers/linux/container_linux.cpp b/containers/linux/container_linux.cpp index 77954eb3..b5d984d4 100644 --- a/containers/linux/container_linux.cpp +++ b/containers/linux/container_linux.cpp @@ -314,6 +314,8 @@ void container_linux::draw_background( litehtml::uint_ptr hdc, const std::vector { const auto& bg = bgvec[i]; + if(bg.image_size.height == 0 || bg.image_size.width == 0) continue; + cairo_rectangle(cr, bg.clip_box.x, bg.clip_box.y, bg.clip_box.width, bg.clip_box.height); cairo_clip(cr); @@ -441,57 +443,54 @@ void container_linux::draw_borders(litehtml::uint_ptr hdc, const litehtml::borde { set_color(cr, borders.right.color); - double r_top = borders.radius.top_right_x; - double r_bottom = borders.radius.bottom_right_x; - - if(r_top) + if(borders.radius.top_right_x && borders.radius.top_right_y) { double end_angle = 2 * M_PI; double start_angle = end_angle - M_PI / 2.0 / ((double) bdr_top / (double) bdr_right + 1); add_path_arc(cr, - draw_pos.right() - r_top, - draw_pos.top() + r_top, - r_top - bdr_right, - r_top - bdr_right + (bdr_right - bdr_top), - end_angle, - start_angle, true); + draw_pos.right() - borders.radius.top_right_x, + draw_pos.top() + borders.radius.top_right_y, + borders.radius.top_right_x - bdr_right, + borders.radius.top_right_y - bdr_right + (bdr_right - bdr_top), + end_angle, + start_angle, true); add_path_arc(cr, - draw_pos.right() - r_top, - draw_pos.top() + r_top, - r_top, - r_top, - start_angle, - end_angle, false); + draw_pos.right() - borders.radius.top_right_x, + draw_pos.top() + borders.radius.top_right_y, + borders.radius.top_right_x, + borders.radius.top_right_y, + start_angle, + end_angle, false); } else { cairo_move_to(cr, draw_pos.right() - bdr_right, draw_pos.top() + bdr_top); cairo_line_to(cr, draw_pos.right(), draw_pos.top()); } - if(r_bottom) + if(borders.radius.bottom_right_x && borders.radius.bottom_right_y) { - cairo_line_to(cr, draw_pos.right(), draw_pos.bottom() - r_bottom); + cairo_line_to(cr, draw_pos.right(), draw_pos.bottom() - borders.radius.bottom_right_y); double start_angle = 0; double end_angle = start_angle + M_PI / 2.0 / ((double) bdr_bottom / (double) bdr_right + 1); add_path_arc(cr, - draw_pos.right() - r_bottom, - draw_pos.bottom() - r_bottom, - r_bottom, - r_bottom, - start_angle, - end_angle, false); + draw_pos.right() - borders.radius.bottom_right_x, + draw_pos.bottom() - borders.radius.bottom_right_y, + borders.radius.bottom_right_x, + borders.radius.bottom_right_y, + start_angle, + end_angle, false); add_path_arc(cr, - draw_pos.right() - r_bottom, - draw_pos.bottom() - r_bottom, - r_bottom - bdr_right, - r_bottom - bdr_right + (bdr_right - bdr_bottom), - end_angle, - start_angle, true); + draw_pos.right() - borders.radius.bottom_right_x, + draw_pos.bottom() - borders.radius.bottom_right_y, + borders.radius.bottom_right_x - bdr_right, + borders.radius.bottom_right_y - bdr_right + (bdr_right - bdr_bottom), + end_angle, + start_angle, true); } else { cairo_line_to(cr, draw_pos.right(), draw_pos.bottom()); @@ -506,57 +505,54 @@ void container_linux::draw_borders(litehtml::uint_ptr hdc, const litehtml::borde { set_color(cr, borders.bottom.color); - double r_left = borders.radius.bottom_left_x; - double r_right = borders.radius.bottom_right_x; - - if(r_left) + if(borders.radius.bottom_left_x && borders.radius.bottom_left_y) { double start_angle = M_PI / 2.0; double end_angle = start_angle + M_PI / 2.0 / ((double) bdr_left / (double) bdr_bottom + 1); add_path_arc(cr, - draw_pos.left() + r_left, - draw_pos.bottom() - r_left, - r_left - bdr_bottom + (bdr_bottom - bdr_left), - r_left - bdr_bottom, - start_angle, - end_angle, false); + draw_pos.left() + borders.radius.bottom_left_x, + draw_pos.bottom() - borders.radius.bottom_left_y, + borders.radius.bottom_left_x - bdr_bottom + (bdr_bottom - bdr_left), + borders.radius.bottom_left_y - bdr_bottom, + start_angle, + end_angle, false); add_path_arc(cr, - draw_pos.left() + r_left, - draw_pos.bottom() - r_left, - r_left, - r_left, - end_angle, - start_angle, true); + draw_pos.left() + borders.radius.bottom_left_x, + draw_pos.bottom() - borders.radius.bottom_left_y, + borders.radius.bottom_left_x, + borders.radius.bottom_left_y, + end_angle, + start_angle, true); } else { cairo_move_to(cr, draw_pos.left(), draw_pos.bottom()); cairo_line_to(cr, draw_pos.left() + bdr_left, draw_pos.bottom() - bdr_bottom); } - if(r_right) + if(borders.radius.bottom_right_x && borders.radius.bottom_right_y) { - cairo_line_to(cr, draw_pos.right() - r_right, draw_pos.bottom()); + cairo_line_to(cr, draw_pos.right() - borders.radius.bottom_right_x, draw_pos.bottom()); double end_angle = M_PI / 2.0; double start_angle = end_angle - M_PI / 2.0 / ((double) bdr_right / (double) bdr_bottom + 1); add_path_arc(cr, - draw_pos.right() - r_right, - draw_pos.bottom() - r_right, - r_right, - r_right, - end_angle, - start_angle, true); + draw_pos.right() - borders.radius.bottom_right_x, + draw_pos.bottom() - borders.radius.bottom_right_y, + borders.radius.bottom_right_x, + borders.radius.bottom_right_y, + end_angle, + start_angle, true); add_path_arc(cr, - draw_pos.right() - r_right, - draw_pos.bottom() - r_right, - r_right - bdr_bottom + (bdr_bottom - bdr_right), - r_right - bdr_bottom, - start_angle, - end_angle, false); + draw_pos.right() - borders.radius.bottom_right_x, + draw_pos.bottom() - borders.radius.bottom_right_y, + borders.radius.bottom_right_x - bdr_bottom + (bdr_bottom - bdr_right), + borders.radius.bottom_right_y - bdr_bottom, + start_angle, + end_angle, false); } else { cairo_line_to(cr, draw_pos.right() - bdr_right, draw_pos.bottom() - bdr_bottom); @@ -571,57 +567,54 @@ void container_linux::draw_borders(litehtml::uint_ptr hdc, const litehtml::borde { set_color(cr, borders.top.color); - double r_left = borders.radius.top_left_x; - double r_right = borders.radius.top_right_x; - - if(r_left) + if(borders.radius.top_left_x && borders.radius.top_left_y) { double end_angle = M_PI * 3.0 / 2.0; double start_angle = end_angle - M_PI / 2.0 / ((double) bdr_left / (double) bdr_top + 1); add_path_arc(cr, - draw_pos.left() + r_left, - draw_pos.top() + r_left, - r_left, - r_left, - end_angle, - start_angle, true); + draw_pos.left() + borders.radius.top_left_x, + draw_pos.top() + borders.radius.top_left_y, + borders.radius.top_left_x, + borders.radius.top_left_y, + end_angle, + start_angle, true); add_path_arc(cr, - draw_pos.left() + r_left, - draw_pos.top() + r_left, - r_left - bdr_top + (bdr_top - bdr_left), - r_left - bdr_top, - start_angle, - end_angle, false); + draw_pos.left() + borders.radius.top_left_x, + draw_pos.top() + borders.radius.top_left_y, + borders.radius.top_left_x - bdr_top + (bdr_top - bdr_left), + borders.radius.top_left_y - bdr_top, + start_angle, + end_angle, false); } else { cairo_move_to(cr, draw_pos.left(), draw_pos.top()); cairo_line_to(cr, draw_pos.left() + bdr_left, draw_pos.top() + bdr_top); } - if(r_right) + if(borders.radius.top_right_x && borders.radius.top_right_y) { - cairo_line_to(cr, draw_pos.right() - r_right, draw_pos.top() + bdr_top); + cairo_line_to(cr, draw_pos.right() - borders.radius.top_right_x, draw_pos.top() + bdr_top); double start_angle = M_PI * 3.0 / 2.0; double end_angle = start_angle + M_PI / 2.0 / ((double) bdr_right / (double) bdr_top + 1); add_path_arc(cr, - draw_pos.right() - r_right, - draw_pos.top() + r_right, - r_right - bdr_top + (bdr_top - bdr_right), - r_right - bdr_top, - start_angle, - end_angle, false); + draw_pos.right() - borders.radius.top_right_x, + draw_pos.top() + borders.radius.top_right_y, + borders.radius.top_right_x - bdr_top + (bdr_top - bdr_right), + borders.radius.top_right_y - bdr_top, + start_angle, + end_angle, false); add_path_arc(cr, - draw_pos.right() - r_right, - draw_pos.top() + r_right, - r_right, - r_right, - end_angle, - start_angle, true); + draw_pos.right() - borders.radius.top_right_x, + draw_pos.top() + borders.radius.top_right_y, + borders.radius.top_right_x, + borders.radius.top_right_y, + end_angle, + start_angle, true); } else { cairo_line_to(cr, draw_pos.right() - bdr_right, draw_pos.top() + bdr_top); @@ -636,57 +629,54 @@ void container_linux::draw_borders(litehtml::uint_ptr hdc, const litehtml::borde { set_color(cr, borders.left.color); - double r_top = borders.radius.top_left_x; - double r_bottom = borders.radius.bottom_left_x; - - if(r_top) + if(borders.radius.top_left_x && borders.radius.top_left_y) { double start_angle = M_PI; double end_angle = start_angle + M_PI / 2.0 / ((double) bdr_top / (double) bdr_left + 1); add_path_arc(cr, - draw_pos.left() + r_top, - draw_pos.top() + r_top, - r_top - bdr_left, - r_top - bdr_left + (bdr_left - bdr_top), - start_angle, - end_angle, false); + draw_pos.left() + borders.radius.top_left_x, + draw_pos.top() + borders.radius.top_left_y, + borders.radius.top_left_x - bdr_left, + borders.radius.top_left_y - bdr_left + (bdr_left - bdr_top), + start_angle, + end_angle, false); add_path_arc(cr, - draw_pos.left() + r_top, - draw_pos.top() + r_top, - r_top, - r_top, - end_angle, - start_angle, true); + draw_pos.left() + borders.radius.top_left_x, + draw_pos.top() + borders.radius.top_left_y, + borders.radius.top_left_x, + borders.radius.top_left_y, + end_angle, + start_angle, true); } else { cairo_move_to(cr, draw_pos.left() + bdr_left, draw_pos.top() + bdr_top); cairo_line_to(cr, draw_pos.left(), draw_pos.top()); } - if(r_bottom) + if(borders.radius.bottom_left_x && borders.radius.bottom_left_y) { - cairo_line_to(cr, draw_pos.left(), draw_pos.bottom() - r_bottom); + cairo_line_to(cr, draw_pos.left(), draw_pos.bottom() - borders.radius.bottom_left_y); double end_angle = M_PI; double start_angle = end_angle - M_PI / 2.0 / ((double) bdr_bottom / (double) bdr_left + 1); add_path_arc(cr, - draw_pos.left() + r_bottom, - draw_pos.bottom() - r_bottom, - r_bottom, - r_bottom, - end_angle, - start_angle, true); + draw_pos.left() + borders.radius.bottom_left_x, + draw_pos.bottom() - borders.radius.bottom_left_y, + borders.radius.bottom_left_x, + borders.radius.bottom_left_y, + end_angle, + start_angle, true); add_path_arc(cr, - draw_pos.left() + r_bottom, - draw_pos.bottom() - r_bottom, - r_bottom - bdr_left, - r_bottom - bdr_left + (bdr_left - bdr_bottom), - start_angle, - end_angle, false); + draw_pos.left() + borders.radius.bottom_left_x, + draw_pos.bottom() - borders.radius.bottom_left_y, + borders.radius.bottom_left_x - bdr_left, + borders.radius.bottom_left_y - bdr_left + (bdr_left - bdr_bottom), + start_angle, + end_angle, false); } else { cairo_line_to(cr, draw_pos.left(), draw_pos.bottom()); @@ -792,9 +782,15 @@ std::shared_ptr container_linux::create_element(const char *t void container_linux::rounded_rectangle( cairo_t* cr, const litehtml::position &pos, const litehtml::border_radiuses &radius ) { cairo_new_path(cr); - if(radius.top_left_x) - { - cairo_arc(cr, pos.left() + radius.top_left_x, pos.top() + radius.top_left_x, radius.top_left_x, M_PI, M_PI * 3.0 / 2.0); + if(radius.top_left_x && radius.top_left_y) + { + add_path_arc(cr, + pos.left() + radius.top_left_x, + pos.top() + radius.top_left_y, + radius.top_left_x, + radius.top_left_y, + M_PI, + M_PI * 3.0 / 2.0, false); } else { cairo_move_to(cr, pos.left(), pos.top()); @@ -802,23 +798,41 @@ void container_linux::rounded_rectangle( cairo_t* cr, const litehtml::position & cairo_line_to(cr, pos.right() - radius.top_right_x, pos.top()); - if(radius.top_right_x) + if(radius.top_right_x && radius.top_right_y) { - cairo_arc(cr, pos.right() - radius.top_right_x, pos.top() + radius.top_right_x, radius.top_right_x, M_PI * 3.0 / 2.0, 2.0 * M_PI); + add_path_arc(cr, + pos.right() - radius.top_right_x, + pos.top() + radius.top_right_y, + radius.top_right_x, + radius.top_right_y, + M_PI * 3.0 / 2.0, + 2.0 * M_PI, false); } cairo_line_to(cr, pos.right(), pos.bottom() - radius.bottom_right_x); - if(radius.bottom_right_x) + if(radius.bottom_right_x && radius.bottom_right_y) { - cairo_arc(cr, pos.right() - radius.bottom_right_x, pos.bottom() - radius.bottom_right_x, radius.bottom_right_x, 0, M_PI / 2.0); + add_path_arc(cr, + pos.right() - radius.bottom_right_x, + pos.bottom() - radius.bottom_right_y, + radius.bottom_right_x, + radius.bottom_right_y, + 0, + M_PI / 2.0, false); } cairo_line_to(cr, pos.left() - radius.bottom_left_x, pos.bottom()); - if(radius.bottom_left_x) + if(radius.bottom_left_x && radius.bottom_left_y) { - cairo_arc(cr, pos.left() + radius.bottom_left_x, pos.bottom() - radius.bottom_left_x, radius.bottom_left_x, M_PI / 2.0, M_PI); + add_path_arc(cr, + pos.left() + radius.bottom_left_x, + pos.bottom() - radius.bottom_left_y, + radius.bottom_left_x, + radius.bottom_left_y, + M_PI / 2.0, + M_PI, false); } } diff --git a/containers/test/test_container.cpp b/containers/test/test_container.cpp index c712fb1c..c3e2a8b6 100644 --- a/containers/test/test_container.cpp +++ b/containers/test/test_container.cpp @@ -84,7 +84,7 @@ void test_container::draw_list_marker(uint_ptr hdc, const list_marker& marker) void test_container::import_css(string& text, const string& url, string& baseurl) { - baseurl = basedir + url; + baseurl = basedir + "/" + url; text = readfile(baseurl); } diff --git a/include/litehtml/borders.h b/include/litehtml/borders.h index e690db6d..9c47abca 100644 --- a/include/litehtml/borders.h +++ b/include/litehtml/borders.h @@ -157,6 +157,35 @@ namespace litehtml if (bottom_left_x < 0) bottom_left_x = 0; if (bottom_left_y < 0) bottom_left_y = 0; } + void fix_values(int width, int height) + { + fix_values(); + int half_width = width / 2; + int half_height = height / 2; + auto fix_one = [&](int& radii_x, int& radii_y) + { + double factor = std::min((double) half_width / (double) radii_x, (double) half_height / (double) radii_y); + radii_x = (int) ((double) radii_x * factor); + radii_y = (int) ((double) radii_y * factor); + }; + + if(top_left_x > half_width || top_left_y > half_height) + { + fix_one(top_left_x, top_left_y); + } + if(top_right_x > half_width || top_right_y > half_height) + { + fix_one(top_right_x, top_right_y); + } + if(bottom_right_x > half_width || bottom_right_y > half_height) + { + fix_one(bottom_right_x, bottom_right_y); + } + if(bottom_left_x > half_width || bottom_left_y > half_height) + { + fix_one(bottom_left_x, bottom_left_y); + } + } }; struct css_border_radius @@ -213,6 +242,7 @@ namespace litehtml ret.top_right_y = top_right_y.calc_percent(height); ret.bottom_right_x = bottom_right_x.calc_percent(width); ret.bottom_right_y = bottom_right_y.calc_percent(height); + ret.fix_values(width, height); return ret; } }; diff --git a/include/litehtml/css_properties.h b/include/litehtml/css_properties.h index 739e35fc..a5609a9b 100644 --- a/include/litehtml/css_properties.h +++ b/include/litehtml/css_properties.h @@ -67,11 +67,13 @@ namespace litehtml flex_wrap m_flex_wrap; flex_justify_content m_flex_justify_content; flex_align_items m_flex_align_items; - flex_align_self m_flex_align_self; + flex_align_items m_flex_align_self; flex_align_content m_flex_align_content; caption_side m_caption_side; + int m_order; + private: void compute_font(const element* el, const std::shared_ptr& doc); void compute_background(const element* el, const std::shared_ptr& doc); @@ -119,8 +121,9 @@ namespace litehtml m_flex_wrap(flex_wrap_nowrap), m_flex_justify_content(flex_justify_content_flex_start), m_flex_align_items(flex_align_items_stretch), - m_flex_align_self(flex_align_self_auto), - m_flex_align_content(flex_align_content_stretch) + m_flex_align_self(flex_align_items_auto), + m_flex_align_content(flex_align_content_stretch), + m_order(0) {} void compute(const element* el, const std::shared_ptr& doc); @@ -250,8 +253,11 @@ namespace litehtml flex_wrap get_flex_wrap() const; flex_justify_content get_flex_justify_content() const; flex_align_items get_flex_align_items() const; - flex_align_self get_flex_align_self() const; + flex_align_items get_flex_align_self() const; flex_align_content get_flex_align_content() const; + + int get_order() const; + void set_order(int order); }; inline element_position css_properties::get_position() const @@ -634,7 +640,7 @@ namespace litehtml return m_flex_align_items; } - inline flex_align_self css_properties::get_flex_align_self() const + inline flex_align_items css_properties::get_flex_align_self() const { return m_flex_align_self; } @@ -653,6 +659,15 @@ namespace litehtml m_caption_side = side; } + inline int css_properties::get_order() const + { + return m_order; + } + + inline void css_properties::set_order(int order) + { + m_order = order; + } } #endif //LITEHTML_CSS_PROPERTIES_H diff --git a/include/litehtml/element.h b/include/litehtml/element.h index c09fa2b3..4d244736 100644 --- a/include/litehtml/element.h +++ b/include/litehtml/element.h @@ -103,6 +103,7 @@ namespace litehtml virtual void draw(uint_ptr hdc, int x, int y, const position *clip, const std::shared_ptr& ri); virtual void draw_background(uint_ptr hdc, int x, int y, const position *clip, const std::shared_ptr &ri); virtual int get_enum_property (string_id name, bool inherited, int default_value, uint_ptr css_properties_member_offset) const; + virtual int get_int_property (string_id name, bool inherited, int default_value, uint_ptr css_properties_member_offset) const; virtual css_length get_length_property(string_id name, bool inherited, css_length default_value, uint_ptr css_properties_member_offset) const; virtual web_color get_color_property (string_id name, bool inherited, web_color default_value, uint_ptr css_properties_member_offset) const; virtual string get_string_property(string_id name, bool inherited, const string& default_value, uint_ptr css_properties_member_offset) const; diff --git a/include/litehtml/flex_item.h b/include/litehtml/flex_item.h new file mode 100644 index 00000000..a2b3426f --- /dev/null +++ b/include/litehtml/flex_item.h @@ -0,0 +1,137 @@ +#ifndef LITEHTML_FLEX_ITEM_H +#define LITEHTML_FLEX_ITEM_H + +#include +#include "formatting_context.h" + +namespace litehtml +{ + class flex_line; + + /** + * Base class for flex item + */ + class flex_item + { + public: + std::shared_ptr el; + int base_size; + int min_size; + def_value max_size; + int main_size; + int grow; + int shrink; + int scaled_flex_shrink_factor; + bool frozen; + int order; + int src_order; + def_value auto_margin_main_start; + def_value auto_margin_main_end; + bool auto_margin_cross_start; + bool auto_margin_cross_end; + flex_align_items align; + + explicit flex_item(std::shared_ptr &_el) : + el(_el), + align(flex_align_items_auto), + grow(0), + base_size(0), + shrink(0), + min_size(0), + frozen(false), + main_size(0), + max_size(0), + order(0), + src_order(0), + scaled_flex_shrink_factor(0), + auto_margin_main_start(0), + auto_margin_main_end(0), + auto_margin_cross_start(false), + auto_margin_cross_end(false) + {} + + virtual ~flex_item() = default; + + bool operator<(const flex_item& b) const + { + if(order < b.order) return true; + if(order == b.order) return src_order < b.src_order; + return false; + } + void init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx, flex_align_items align_items); + virtual void apply_main_auto_margins() = 0; + virtual bool apply_cross_auto_margins(int cross_size) = 0; + virtual void set_main_position(int pos) = 0; + virtual void set_cross_position(int pos) = 0; + virtual int get_el_main_size() = 0; + virtual int get_el_cross_size() = 0; + + void place(flex_line &ln, int main_pos, + const containing_block_context &self_size, + formatting_context *fmt_ctx); + int get_last_baseline(baseline::_baseline_type type) const; + int get_first_baseline(baseline::_baseline_type type) const; + + protected: + virtual void direction_specific_init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx) = 0; + virtual void align_stretch(flex_line &ln, const containing_block_context &self_size, + formatting_context *fmt_ctx) = 0; + virtual void align_baseline(flex_line &ln, + const containing_block_context &self_size, + formatting_context *fmt_ctx) = 0; + }; + + /** + * Flex item with "flex-direction: row" or " flex-direction: row-reverse" + */ + class flex_item_row_direction : public flex_item + { + public: + explicit flex_item_row_direction(std::shared_ptr &_el) : flex_item(_el) {} + + void apply_main_auto_margins() override; + bool apply_cross_auto_margins(int cross_size) override; + void set_main_position(int pos) override; + void set_cross_position(int pos) override; + int get_el_main_size() override; + int get_el_cross_size() override; + + protected: + void direction_specific_init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx) override; + void align_stretch(flex_line &ln, const containing_block_context &self_size, + formatting_context *fmt_ctx) override; + void align_baseline(flex_line &ln, + const containing_block_context &self_size, + formatting_context *fmt_ctx) override; + }; + + /** + * Flex item with "flex-direction: column" or " flex-direction: column-reverse" + */ + class flex_item_column_direction : public flex_item + { + public: + explicit flex_item_column_direction(std::shared_ptr &_el) : flex_item(_el) {} + + void apply_main_auto_margins() override; + bool apply_cross_auto_margins(int cross_size) override; + void set_main_position(int pos) override; + void set_cross_position(int pos) override; + int get_el_main_size() override; + int get_el_cross_size() override; + + protected: + void direction_specific_init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx) override; + void align_stretch(flex_line &ln, const containing_block_context &self_size, + formatting_context *fmt_ctx) override; + void align_baseline(flex_line &ln, + const containing_block_context &self_size, + formatting_context *fmt_ctx) override; + }; +} + +#endif //LITEHTML_FLEX_ITEM_H diff --git a/include/litehtml/flex_line.h b/include/litehtml/flex_line.h new file mode 100644 index 00000000..4803d238 --- /dev/null +++ b/include/litehtml/flex_line.h @@ -0,0 +1,56 @@ +#ifndef LITEHTML_FLEX_LINE_H +#define LITEHTML_FLEX_LINE_H + +#include "formatting_context.h" + +namespace litehtml +{ + class flex_item; + + class flex_line + { + public: + std::list> items; + int cross_start; // for row direction: top. for column direction: left + int main_size; // sum of all items main size + int cross_size; // sum of all items cross size + int base_size; + int total_grow; + int total_shrink; + int num_auto_margin_main_start; // number of items with auto margin left/top + int num_auto_margin_main_end; // number of items with auto margin right/bottom + baseline first_baseline; + baseline last_baseline; + bool reverse_main; + bool reverse_cross; + + flex_line(bool _reverse_main, bool _reverse_cross) : + cross_size(0), + cross_start(0), + total_grow(0), + base_size(0), + total_shrink(0), + main_size(0), + num_auto_margin_main_start(0), + num_auto_margin_main_end(0), + first_baseline(), + last_baseline(), + reverse_main(_reverse_main), + reverse_cross(_reverse_cross) + {} + + void init(int container_main_size, bool fit_container, bool is_row_direction, + const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx); + bool distribute_main_auto_margins(int free_main_size); + int calculate_items_position(int container_main_size, + flex_justify_content justify_content, + bool is_row_direction, + const containing_block_context &self_size, + formatting_context *fmt_ctx); + protected: + void distribute_free_space(int container_main_size); + }; +} + +#endif //LITEHTML_FLEX_LINE_H diff --git a/include/litehtml/html_tag.h b/include/litehtml/html_tag.h index 9578d383..b085d7df 100644 --- a/include/litehtml/html_tag.h +++ b/include/litehtml/html_tag.h @@ -72,6 +72,7 @@ namespace litehtml template const Type& get_property_impl (string_id name, bool inherited, const Type& default_value, uint_ptr css_properties_member_offset) const; int get_enum_property (string_id name, bool inherited, int default_value, uint_ptr css_properties_member_offset) const override; + int get_int_property (string_id name, bool inherited, int default_value, uint_ptr css_properties_member_offset) const override; css_length get_length_property(string_id name, bool inherited, css_length default_value, uint_ptr css_properties_member_offset) const override; web_color get_color_property (string_id name, bool inherited, web_color default_value, uint_ptr css_properties_member_offset) const override; string get_string_property(string_id name, bool inherited, const string& default_value, uint_ptr css_properties_member_offset) const override; diff --git a/include/litehtml/render_block_context.h b/include/litehtml/render_block_context.h index 3b519226..c6938983 100644 --- a/include/litehtml/render_block_context.h +++ b/include/litehtml/render_block_context.h @@ -23,6 +23,8 @@ namespace litehtml { return std::make_shared(src_el()); } + int get_first_baseline() override; + int get_last_baseline() override; }; } diff --git a/include/litehtml/render_flex.h b/include/litehtml/render_flex.h index 5d31bc9b..6a03b98e 100644 --- a/include/litehtml/render_flex.h +++ b/include/litehtml/render_flex.h @@ -2,32 +2,17 @@ #define LITEHTML_RENDER_FLEX_H #include "render_block.h" +#include "flex_item.h" +#include "flex_line.h" namespace litehtml { class render_item_flex : public render_item_block { - struct flex_item - { - std::shared_ptr el; - int base_size; - int main_size; - int min_width; - int max_width; - int line; - - explicit flex_item(std::shared_ptr _el) : - el(std::move(_el)), - min_width(0), - max_width(0), - line(0), - base_size(0), - main_size(0) - {} - }; - protected: - std::list> m_flex_items; + std::list m_lines; + std::list get_lines(const containing_block_context &self_size, formatting_context *fmt_ctx, bool is_row_direction, + int container_main_size, bool single_line); int _render_content(int x, int y, bool second_pass, const containing_block_context &self_size, formatting_context* fmt_ctx) override; public: @@ -38,8 +23,10 @@ namespace litehtml { return std::make_shared(src_el()); } - void draw_children(uint_ptr hdc, int x, int y, const position* clip, draw_flag flag, int zindex) override; std::shared_ptr init() override; + + int get_first_baseline() override; + int get_last_baseline() override; }; } diff --git a/include/litehtml/render_inline.h b/include/litehtml/render_inline.h index 47601156..666074b9 100644 --- a/include/litehtml/render_inline.h +++ b/include/litehtml/render_inline.h @@ -18,7 +18,14 @@ namespace litehtml void set_inline_boxes( position::vector& boxes ) override { m_boxes = boxes; } void add_inline_box( const position& box ) override { m_boxes.emplace_back(box); }; void clear_inline_boxes() override { m_boxes.clear(); } - int get_base_line() override { return src_el()->css().get_font_metrics().base_line(); } + int get_first_baseline() override + { + return src_el()->css().get_font_metrics().height - src_el()->css().get_font_metrics().base_line(); + } + int get_last_baseline() override + { + return src_el()->css().get_font_metrics().height - src_el()->css().get_font_metrics().base_line(); + } std::shared_ptr clone() override { @@ -28,3 +35,4 @@ namespace litehtml } #endif //LITEHTML_RENDER_INLINE_H + diff --git a/include/litehtml/render_inline_context.h b/include/litehtml/render_inline_context.h index 894cfe98..7d629bc7 100644 --- a/include/litehtml/render_inline_context.h +++ b/include/litehtml/render_inline_context.h @@ -48,7 +48,8 @@ namespace litehtml return std::make_shared(src_el()); } - int get_base_line() override; + int get_first_baseline() override; + int get_last_baseline() override; }; } diff --git a/include/litehtml/render_item.h b/include/litehtml/render_item.h index 9d4561e5..ac8a9f4c 100644 --- a/include/litehtml/render_item.h +++ b/include/litehtml/render_item.h @@ -86,7 +86,7 @@ namespace litehtml int width() const { - return m_pos.width + m_margins.left + m_margins.right + m_padding.width() + m_borders.width(); + return m_pos.width + m_margins.width() + m_padding.width() + m_borders.width(); } int padding_top() const @@ -224,27 +224,43 @@ namespace litehtml int box_sizing_left() const { - return m_padding.left + m_borders.left; + if(css().get_box_sizing() == box_sizing_border_box) + { + return m_padding.left + m_borders.left; + } + return 0; } int box_sizing_right() const { - return m_padding.right + m_borders.right; + if(css().get_box_sizing() == box_sizing_border_box) + { + return m_padding.right + m_borders.right; + } + return 0; } int box_sizing_width() const { - return box_sizing_left() + box_sizing_left(); + return box_sizing_left() + box_sizing_right(); } int box_sizing_top() const { - return m_padding.top + m_borders.top; + if(css().get_box_sizing() == box_sizing_border_box) + { + return m_padding.top + m_borders.top; + } + return 0; } int box_sizing_bottom() const { - return m_padding.bottom + m_borders.bottom; + if(css().get_box_sizing() == box_sizing_border_box) + { + return m_padding.bottom + m_borders.bottom; + } + return 0; } int box_sizing_height() const @@ -285,6 +301,7 @@ namespace litehtml m_element->in_normal_flow() && m_element->css().get_float() == float_none && m_margins.top >= 0 && + !is_flex_item() && !is_root(); } @@ -303,16 +320,34 @@ namespace litehtml return !(m_skip || src_el()->css().get_display() == display_none || src_el()->css().get_visibility() != visibility_visible); } + bool is_flex_item() const + { + auto par = parent(); + if(par && (par->css().get_display() == display_inline_flex || par->css().get_display() == display_flex)) + { + return true; + } + return false; + } + int render(int x, int y, const containing_block_context& containing_block_size, formatting_context* fmt_ctx, bool second_pass = false); - int calc_width(int defVal, int containing_block_width) const; - bool get_predefined_height(int& p_height, int containing_block_height) const; void apply_relative_shift(const containing_block_context &containing_block_size); void calc_outlines( int parent_width ); int calc_auto_margins(int parent_width); // returns left margin virtual std::shared_ptr init(); virtual void apply_vertical_align() {} - virtual int get_base_line() { return 0; } + /** + * Get first baseline position. Default position is element bottom without bottom margin. + * @returns offset of the first baseline from element top + */ + virtual int get_first_baseline() { return height() - margin_bottom(); } + /** + * Get last baseline position. Default position is element bottom without bottom margin. + * @returns offset of the last baseline from element top + */ + virtual int get_last_baseline() { return height() - margin_bottom(); } + virtual std::shared_ptr clone() { return std::make_shared(src_el()); diff --git a/include/litehtml/string_id.h b/include/litehtml/string_id.h index dbde2f4a..2c90fc65 100644 --- a/include/litehtml/string_id.h +++ b/include/litehtml/string_id.h @@ -288,10 +288,11 @@ STRING_ID( _flex_shrink_, _flex_basis_, - _counter_reset_, - _counter_increment_, + _caption_side_, + _order_, - _caption_side_, + _counter_reset_, + _counter_increment_, ); #undef STRING_ID extern const string_id empty_id; // _id("") diff --git a/include/litehtml/style.h b/include/litehtml/style.h index c83876ad..2e04059f 100644 --- a/include/litehtml/style.h +++ b/include/litehtml/style.h @@ -199,6 +199,7 @@ namespace litehtml bool parse_one_background_size(const string& val, css_size& size); void parse_font(const string& val, bool important); void parse_flex(const string& val, bool important); + void parse_align_self(string_id name, const string& val, bool important); static css_length parse_border_width(const string& str); static void parse_two_lengths(const string& str, css_length len[2]); static int parse_four_lengths(const string& str, css_length len[4]); diff --git a/include/litehtml/types.h b/include/litehtml/types.h index b1feeeea..bfcaa6c3 100644 --- a/include/litehtml/types.h +++ b/include/litehtml/types.h @@ -195,6 +195,14 @@ namespace litehtml cbc_value_type_none, // min/max width/height of containing block is defined as none }; + enum cbc_size_mode + { + size_mode_normal = 0x00, + size_mode_exact_width = 0x01, + size_mode_exact_height = 0x02, + size_mode_content = 0x04, + }; + struct typed_int { int value; @@ -235,6 +243,7 @@ namespace litehtml typed_int max_height; int context_idx; + uint32_t size_mode; containing_block_context() : width(0, cbc_value_type_auto), @@ -244,17 +253,26 @@ namespace litehtml height(0, cbc_value_type_auto), min_height(0, cbc_value_type_none), max_height(0, cbc_value_type_none), - context_idx(0) + context_idx(0), + size_mode(size_mode_normal) {} - containing_block_context new_width(int w) const + containing_block_context new_width(int w, uint32_t _size_mode = size_mode_normal) const { containing_block_context ret = *this; - //if(ret.width.type != cbc_value_type_absolute) - { - ret.render_width = w - (ret.width - ret.render_width); - ret.width = w; - } + ret.render_width = w - (ret.width - ret.render_width); + ret.width = w; + ret.size_mode = _size_mode; + return ret; + } + + containing_block_context new_width_height(int w, int h, uint32_t _size_mode = size_mode_normal) const + { + containing_block_context ret = *this; + ret.render_width = w - (ret.width - ret.render_width); + ret.width = w; + ret.height = h; + ret.size_mode = _size_mode; return ret; } }; @@ -693,7 +711,7 @@ namespace litehtml m_is_default = true; m_val = def_val; } - bool is_default() + bool is_default() const { return m_is_default; } @@ -703,12 +721,72 @@ namespace litehtml m_is_default = false; return m_val; } - operator T() + operator T() const { return m_val; } }; + class baseline + { + public: + enum _baseline_type + { + baseline_type_none, + baseline_type_top, + baseline_type_bottom, + }; + + public: + baseline() : m_value(0), m_type(baseline_type_none) {} + baseline(int _value, _baseline_type _type) : m_value(_value), m_type(_type) {} + + int value() const { return m_value; } + void value(int _value) { m_value = _value; } + _baseline_type type() const { return m_type; } + void type(_baseline_type _type) { m_type = _type; } + + operator int() const { return m_value; } + baseline& operator=(int _value) { m_value = _value; return *this; } + + void set(int _value, _baseline_type _type) { m_value = _value; m_type =_type; } + /** + * Get baseline offset from top of element with specified height + * @param height - element height + * @return baseline offset + */ + int get_offset_from_top(int height) const + { + if(m_type == baseline_type_top) return m_value; + return height - m_value; + } + /** + * Get baseline offset from bottom of element with specified height + * @param height - element height + * @return baseline offset + */ + int get_offset_from_bottom(int height) const + { + if(m_type == baseline_type_bottom) return m_value; + return height - m_value; + } + /** + * Calculate baseline by top and bottom positions of element aligned by baseline == 0 + * @param top - top of the aligned element + * @param bottom - bottom of the aligned element + */ + void calc(int top, int bottom) + { + if(m_type == baseline_type_top) + m_value = -top; + else if(m_type == baseline_type_bottom) + m_value = bottom; + } + private: + int m_value; + _baseline_type m_type; + }; + #define media_orientation_strings "portrait;landscape" @@ -848,46 +926,51 @@ namespace litehtml flex_wrap_wrap_reverse }; -#define flex_justify_content_strings "flex-start;flex-end;center;space-between;space-around" +#define flex_justify_content_strings "normal;flex-start;flex-end;center;space-between;space-around;start;end;left;right;space-evenly;stretch" enum flex_justify_content { + flex_justify_content_normal, flex_justify_content_flex_start, flex_justify_content_flex_end, flex_justify_content_center, flex_justify_content_space_between, - flex_justify_content_space_around + flex_justify_content_space_around, + flex_justify_content_start, + flex_justify_content_end, + flex_justify_content_left, + flex_justify_content_right, + flex_justify_content_space_evenly, + flex_justify_content_stretch, }; -#define flex_align_items_strings "flex-start;flex-end;center;baseline;stretch" +#define flex_align_items_strings "normal;flex-start;flex-end;center;start;end;baseline;stretch;auto" enum flex_align_items { + flex_align_items_flex_normal, flex_align_items_flex_start, flex_align_items_flex_end, flex_align_items_center, + flex_align_items_start, + flex_align_items_end, flex_align_items_baseline, - flex_align_items_stretch - }; - -#define flex_align_self_strings "auto;flex-start;flex-end;center;baseline;stretch" - - enum flex_align_self - { - flex_align_self_auto, - flex_align_self_flex_start, - flex_align_self_flex_end, - flex_align_self_center, - flex_align_self_baseline, - flex_align_self_stretch + flex_align_items_stretch, + flex_align_items_auto, // used for align-self property only + flex_align_items_first = 0x100, + flex_align_items_last = 0x200, + flex_align_items_unsafe = 0x400, + flex_align_items_safe = 0x800, }; -#define flex_align_content_strings "flex-start;flex-end;center;space-between;space-around;stretch" +#define flex_align_content_strings "flex-start;start;flex-end;end;center;space-between;space-around;stretch" enum flex_align_content { flex_align_content_flex_start, + flex_align_content_start, flex_align_content_flex_end, + flex_align_content_end, flex_align_content_center, flex_align_content_space_between, flex_align_content_space_around, diff --git a/src/css_properties.cpp b/src/css_properties.cpp index 2696ae28..a3b458eb 100644 --- a/src/css_properties.cpp +++ b/src/css_properties.cpp @@ -240,6 +240,8 @@ void litehtml::css_properties::compute(const element* el, const document::ptr& d doc->container()->load_image(m_list_style_image.c_str(), m_list_style_image_baseurl.c_str(), true); } + m_order = el->get_int_property(_order_, false, 0, offset(m_order)); + compute_background(el, doc); compute_flex(el, doc); } @@ -391,22 +393,27 @@ void litehtml::css_properties::compute_background(const element* el, const docum void litehtml::css_properties::compute_flex(const element* el, const document::ptr& doc) { - if (m_display == display_flex) + if (m_display == display_flex || m_display == display_inline_flex) { m_flex_direction = (flex_direction) el->get_enum_property(_flex_direction_, false, flex_direction_row, offset(m_flex_direction)); m_flex_wrap = (flex_wrap) el->get_enum_property(_flex_wrap_, false, flex_wrap_nowrap, offset(m_flex_wrap)); m_flex_justify_content = (flex_justify_content) el->get_enum_property(_justify_content_, false, flex_justify_content_flex_start, offset(m_flex_justify_content)); - m_flex_align_items = (flex_align_items) el->get_enum_property(_align_items_, false, flex_align_items_stretch, offset(m_flex_align_items)); + m_flex_align_items = (flex_align_items) el->get_enum_property(_align_items_, false, flex_align_items_flex_normal, offset(m_flex_align_items)); m_flex_align_content = (flex_align_content) el->get_enum_property(_align_content_, false, flex_align_content_stretch, offset(m_flex_align_content)); } + m_flex_align_self = (flex_align_items) el->get_enum_property(_align_self_, false, flex_align_items_auto, offset(m_flex_align_self)); auto parent = el->parent(); - if (parent && parent->css().m_display == display_flex) + if (parent && (parent->css().m_display == display_flex || parent->css().m_display == display_inline_flex)) { m_flex_grow = el->get_number_property(_flex_grow_, false, 0, offset(m_flex_grow)); m_flex_shrink = el->get_number_property(_flex_shrink_, false, 1, offset(m_flex_shrink)); - m_flex_align_self = (flex_align_self) el->get_enum_property(_align_self_, false, flex_align_self_auto, offset(m_flex_align_self)); - m_flex_basis = el->get_length_property(_flex_shrink_, false, css_length::predef_value(flex_basis_auto), offset(m_flex_basis)); + m_flex_basis = el->get_length_property(_flex_basis_, false, css_length::predef_value(flex_basis_auto), offset(m_flex_basis)); + if(!m_flex_basis.is_predefined() && m_flex_basis.units() == css_units_none && m_flex_basis.val() != 0) + { + // flex-basis property must contain units + m_flex_basis.predef(flex_basis_auto); + } doc->cvt_units(m_flex_basis, get_font_size()); if(m_display == display_inline || m_display == display_inline_block) { diff --git a/src/element.cpp b/src/element.cpp index 5fa68cac..16b4b587 100644 --- a/src/element.cpp +++ b/src/element.cpp @@ -274,8 +274,18 @@ element::ptr element::_add_before_after(int type, const style& style) bool element::is_block_formatting_context() const { + if(m_css.get_display() == display_block) + { + auto par = parent(); + if(par && (par->css().get_display() == display_inline_flex || par->css().get_display() == display_flex)) + { + return true; + } + } if( m_css.get_display() == display_inline_block || m_css.get_display() == display_table_cell || + m_css.get_display() == display_inline_flex || + m_css.get_display() == display_flex || m_css.get_display() == display_table_caption || is_root() || m_css.get_float() != float_none || @@ -448,6 +458,7 @@ bool element::is_replaced() const LITEHTML_RETURN_FUNC(false) void element::draw(uint_ptr hdc, int x, int y, const position *clip, const std::shared_ptr &ri) LITEHTML_EMPTY_FUNC void element::draw_background(uint_ptr hdc, int x, int y, const position *clip, const std::shared_ptr &ri) LITEHTML_EMPTY_FUNC int element::get_enum_property (string_id name, bool inherited, int defval, uint_ptr css_properties_member_offset) const LITEHTML_RETURN_FUNC(0) +int element::get_int_property (string_id name, bool inherited, int defval, uint_ptr css_properties_member_offset) const LITEHTML_RETURN_FUNC(0) css_length element::get_length_property (string_id name, bool inherited, css_length defval, uint_ptr css_properties_member_offset) const LITEHTML_RETURN_FUNC(0) web_color element::get_color_property (string_id name, bool inherited, web_color defval, uint_ptr css_properties_member_offset) const LITEHTML_RETURN_FUNC(web_color()) string element::get_string_property (string_id name, bool inherited, const string& defval, uint_ptr css_properties_member_offset) const LITEHTML_RETURN_FUNC("") diff --git a/src/flex_item.cpp b/src/flex_item.cpp new file mode 100644 index 00000000..d0fbaecd --- /dev/null +++ b/src/flex_item.cpp @@ -0,0 +1,488 @@ +#include "html.h" +#include "flex_item.h" +#include "render_item.h" +#include "flex_line.h" +#include + +void litehtml::flex_item::init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx, flex_align_items align_items) +{ + grow = (int) std::nearbyint(el->css().get_flex_grow() * 1000.0); + // Negative numbers are invalid. + // https://www.w3.org/TR/css-flexbox-1/#valdef-flex-grow-number + if(grow < 0) grow = 0; + + shrink = (int) std::nearbyint(el->css().get_flex_shrink() * 1000.0); + // Negative numbers are invalid. + // https://www.w3.org/TR/css-flexbox-1/#valdef-flex-shrink-number + if(shrink < 0) shrink = 1000; + + el->calc_outlines(self_size.render_width); + order = el->css().get_order(); + + direction_specific_init(self_size, fmt_ctx); + + if (el->css().get_flex_align_self() == flex_align_items_auto) + { + align = align_items; + } else + { + align = el->css().get_flex_align_self(); + } + main_size = base_size; + scaled_flex_shrink_factor = base_size * shrink; + frozen = false; +} + +void litehtml::flex_item::place(flex_line &ln, int main_pos, + const containing_block_context &self_size, + formatting_context *fmt_ctx) +{ + apply_main_auto_margins(); + set_main_position(main_pos); + if(!apply_cross_auto_margins(ln.cross_size)) + { + switch (align & 0xFF) + { + case flex_align_items_baseline: + align_baseline(ln, self_size, fmt_ctx); + break; + case flex_align_items_flex_end: + if(ln.reverse_cross) + { + set_cross_position(ln.cross_start); + break; /// If cross axis is reversed position item from start + } + case flex_align_items_end: + set_cross_position(ln.cross_start + ln.cross_size - get_el_cross_size()); + break; + case flex_align_items_center: + set_cross_position(ln.cross_start + ln.cross_size / 2 - get_el_cross_size() / 2); + break; + case flex_align_items_flex_start: + if(ln.reverse_cross) /// If cross axis is reversed position item from end + { + set_cross_position(ln.cross_start + ln.cross_size - get_el_cross_size()); + break; + } + case flex_align_items_start: + set_cross_position(ln.cross_start); + break; + default: + align_stretch(ln, self_size, fmt_ctx); + break; + } + } +} + +int litehtml::flex_item::get_last_baseline(baseline::_baseline_type type) const +{ + if(type == baseline::baseline_type_top) + { + return el->get_last_baseline(); + } else if(type == baseline::baseline_type_bottom) + { + return el->height() - el->get_last_baseline(); + } + return 0; +} + +int litehtml::flex_item::get_first_baseline(litehtml::baseline::_baseline_type type) const +{ + if(type == baseline::baseline_type_top) + { + return el->get_first_baseline(); + } else if(type == baseline::baseline_type_bottom) + { + return el->height() - el->get_first_baseline(); + } + return 0; +} + + +//////////////////////////////////////////////////////////////////////////////////// + +void litehtml::flex_item_row_direction::direction_specific_init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx) +{ + if(el->css().get_margins().left.is_predefined()) + { + auto_margin_main_start = 0; + } + if(el->css().get_margins().right.is_predefined()) + { + auto_margin_main_end = 0; + } + if(el->css().get_margins().top.is_predefined()) + { + auto_margin_cross_start = true; + } + if(el->css().get_margins().bottom.is_predefined()) + { + auto_margin_cross_end = true; + } + def_value content_size(0); + if (el->css().get_min_width().is_predefined()) + { + min_size = el->render(0, 0, + self_size.new_width(el->content_offset_width(), + containing_block_context::size_mode_content), fmt_ctx); + content_size = min_size; + } else + { + min_size = el->css().get_min_width().calc_percent(self_size.render_width) + + el->content_offset_width(); + } + if (!el->css().get_max_width().is_predefined()) + { + max_size = el->css().get_max_width().calc_percent(self_size.render_width) + + el->content_offset_width(); + } + bool flex_basis_predefined = el->css().get_flex_basis().is_predefined(); + int predef = flex_basis_auto; + if(flex_basis_predefined) + { + predef = el->css().get_flex_basis().predef(); + } else + { + if(el->css().get_flex_basis().val() < 0) + { + flex_basis_predefined = true; + } + } + + if (flex_basis_predefined) + { + switch (predef) + { + case flex_basis_auto: + if (!el->css().get_width().is_predefined()) + { + base_size = el->css().get_width().calc_percent(self_size.render_width) + + el->content_offset_width(); + break; + } + // if width is not predefined, use content size as base size + case flex_basis_fit_content: + case flex_basis_content: + base_size = el->render(0, 0, self_size.new_width(self_size.render_width + el->content_offset_width(), + containing_block_context::size_mode_content | + containing_block_context::size_mode_exact_width), + fmt_ctx); + break; + case flex_basis_min_content: + if(content_size.is_default()) + { + content_size = el->render(0, 0, + self_size.new_width(el->content_offset_width(), + containing_block_context::size_mode_content), + fmt_ctx); + } + base_size = content_size; + break; + case flex_basis_max_content: + el->render(0, 0, self_size, fmt_ctx); + base_size = el->width(); + break; + default: + base_size = 0; + break; + } + } else + { + base_size = el->css().get_flex_basis().calc_percent(self_size.render_width) + + el->content_offset_width(); + base_size = std::max(base_size, min_size); + } +} + +void litehtml::flex_item_row_direction::apply_main_auto_margins() +{ + // apply auto margins to item + if(!auto_margin_main_start.is_default()) + { + el->get_margins().left = auto_margin_main_start; + el->pos().x += auto_margin_main_start; + } + if(!auto_margin_main_end.is_default()) el->get_margins().right = auto_margin_main_end; +} + +bool litehtml::flex_item_row_direction::apply_cross_auto_margins(int cross_size) +{ + if(auto_margin_cross_end || auto_margin_cross_start) + { + int margins_num = 0; + if(auto_margin_cross_end) + { + margins_num++; + } + if(auto_margin_cross_start) + { + margins_num++; + } + int margin = (cross_size - el->height()) / margins_num; + if(auto_margin_cross_start) + { + el->get_margins().top = margin; + el->pos().y = el->content_offset_top(); + } + if(auto_margin_cross_end) + { + el->get_margins().bottom = margin; + } + return true; + } + return false; +} + +void litehtml::flex_item_row_direction::set_main_position(int pos) +{ + el->pos().x = pos + el->content_offset_left(); +} + +void litehtml::flex_item_row_direction::set_cross_position(int pos) +{ + el->pos().y = pos + el->content_offset_top(); +} + +void litehtml::flex_item_row_direction::align_stretch(flex_line &ln, const containing_block_context &self_size, + formatting_context *fmt_ctx) +{ + set_cross_position(ln.cross_start); + if (el->css().get_height().is_predefined()) + { + el->render(el->left(), el->top(), self_size.new_width_height( + el->pos().width + el->box_sizing_width(), + ln.cross_size - el->content_offset_height() + el->box_sizing_height(), + containing_block_context::size_mode_exact_width | + containing_block_context::size_mode_exact_height + ), fmt_ctx); + apply_main_auto_margins(); + } +} + +void litehtml::flex_item_row_direction::align_baseline(litehtml::flex_line &ln, + const containing_block_context &self_size, + formatting_context *fmt_ctx) +{ + if (align & flex_align_items_last) + { + set_cross_position(ln.cross_start + ln.last_baseline.get_offset_from_top(ln.cross_size) - el->get_last_baseline()); + } else + { + set_cross_position(ln.cross_start + ln.first_baseline.get_offset_from_top(ln.cross_size) - el->get_first_baseline()); + } +} + +int litehtml::flex_item_row_direction::get_el_main_size() +{ + return el->width(); +} + +int litehtml::flex_item_row_direction::get_el_cross_size() +{ + return el->height(); +} + +//////////////////////////////////////////////////////////////////////////////////// + +void litehtml::flex_item_column_direction::direction_specific_init(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx) +{ + if(el->css().get_margins().top.is_predefined()) + { + auto_margin_main_start = 0; + } + if(el->css().get_margins().bottom.is_predefined()) + { + auto_margin_main_end = 0; + } + if(el->css().get_margins().left.is_predefined()) + { + auto_margin_cross_start = true; + } + if(el->css().get_margins().right.is_predefined()) + { + auto_margin_cross_end = true; + } + if (el->css().get_min_height().is_predefined()) + { + el->render(0, 0, self_size.new_width(self_size.render_width, containing_block_context::size_mode_content), fmt_ctx); + min_size = el->height(); + } else + { + min_size = el->css().get_min_height().calc_percent(self_size.height) + + el->content_offset_height(); + } + if (!el->css().get_max_height().is_predefined()) + { + max_size = el->css().get_max_height().calc_percent(self_size.height) + + el->content_offset_width(); + } + + bool flex_basis_predefined = el->css().get_flex_basis().is_predefined(); + int predef = flex_basis_auto; + if(flex_basis_predefined) + { + predef = el->css().get_flex_basis().predef(); + } else + { + if(el->css().get_flex_basis().val() < 0) + { + flex_basis_predefined = true; + } + } + + if (flex_basis_predefined) + { + switch (predef) + { + case flex_basis_auto: + if (!el->css().get_height().is_predefined()) + { + base_size = el->css().get_height().calc_percent(self_size.height) + + el->content_offset_height(); + break; + } + case flex_basis_max_content: + case flex_basis_fit_content: + el->render(0, 0, self_size, fmt_ctx); + base_size = el->height(); + break; + case flex_basis_min_content: + base_size = min_size; + break; + default: + base_size = 0; + } + } else + { + if(el->css().get_flex_basis().units() == css_units_percentage) + { + if(self_size.height.type == containing_block_context::cbc_value_type_absolute) + { + base_size = el->css().get_flex_basis().calc_percent(self_size.height) + + el->content_offset_height(); + } else + { + base_size = 0; + } + } else + { + base_size = (int) el->css().get_flex_basis().val() + el->content_offset_height(); + } + base_size = std::max(base_size, min_size); + } +} + +void litehtml::flex_item_column_direction::apply_main_auto_margins() +{ + // apply auto margins to item + if(!auto_margin_main_start.is_default()) + { + el->get_margins().top = auto_margin_main_start; + el->pos().y += auto_margin_main_start; + } + if(!auto_margin_main_end.is_default()) el->get_margins().bottom = auto_margin_main_end; +} + +bool litehtml::flex_item_column_direction::apply_cross_auto_margins(int cross_size) +{ + if(auto_margin_cross_end || auto_margin_cross_start) + { + int margins_num = 0; + if(auto_margin_cross_end) + { + margins_num++; + } + if(auto_margin_cross_start) + { + margins_num++; + } + int margin = (cross_size - el->width()) / margins_num; + if(auto_margin_cross_start) + { + el->get_margins().left = margin; + el->pos().x += el->content_offset_left(); + } + if(auto_margin_cross_end) + { + el->get_margins().right = margin; + } + } + return false; +} + +void litehtml::flex_item_column_direction::set_main_position(int pos) +{ + el->pos().y = pos + el->content_offset_top(); +} + +void litehtml::flex_item_column_direction::set_cross_position(int pos) +{ + el->pos().x = pos + el->content_offset_left(); +} + +void litehtml::flex_item_column_direction::align_stretch(flex_line &ln, const containing_block_context &self_size, + formatting_context *fmt_ctx) +{ + /// MAIN: Y + /// CROSS: X + if (!el->css().get_width().is_predefined()) + { + el->render(ln.cross_start, + el->pos().y - el->content_offset_top(), + self_size.new_width_height(ln.cross_size - el->content_offset_width() + el->box_sizing_width(), + main_size - el->content_offset_height() + el->box_sizing_height(), + containing_block_context::size_mode_exact_height), + fmt_ctx, false); + } else + { + el->render(ln.cross_start, + el->pos().y - el->content_offset_top(), + self_size.new_width_height( + ln.cross_size - el->content_offset_width() + el->box_sizing_width(), + main_size - el->content_offset_height() + el->box_sizing_height(), + containing_block_context::size_mode_exact_width | + containing_block_context::size_mode_exact_height), + fmt_ctx, false); + } + /// Apply auto margins after rendering + apply_main_auto_margins(); +} + +void litehtml::flex_item_column_direction::align_baseline(litehtml::flex_line &ln, + const containing_block_context &self_size, + formatting_context *fmt_ctx) +{ + // The fallback alignment for first baseline is start, the one for last baseline is end. + if(align & flex_align_items_last) + { + if(ln.reverse_cross) + { + set_cross_position(ln.cross_start); + } else + { + set_cross_position(ln.cross_start + ln.cross_size - get_el_cross_size()); + } + } else + { + if(!ln.reverse_cross) + { + set_cross_position(ln.cross_start); + } else + { + set_cross_position(ln.cross_start + ln.cross_size - get_el_cross_size()); + } + } +} + +int litehtml::flex_item_column_direction::get_el_main_size() +{ + return el->height(); +} + +int litehtml::flex_item_column_direction::get_el_cross_size() +{ + return el->width(); +} diff --git a/src/flex_line.cpp b/src/flex_line.cpp new file mode 100644 index 00000000..5f966b3b --- /dev/null +++ b/src/flex_line.cpp @@ -0,0 +1,454 @@ +#include "html.h" +#include "flex_line.h" +#include "flex_item.h" +#include "render_item.h" + +void litehtml::flex_line::distribute_free_space(int container_main_size) +{ + // Determine the used flex factor. Sum the outer hypothetical main sizes of all items on the line. + // If the sum is less than the flex container’s inner main size, use the flex grow factor for the + // rest of this algorithm; otherwise, use the flex shrink factor. + int initial_free_space = container_main_size - base_size; + bool grow; + int total_flex_factor; + if(initial_free_space < 0) + { + grow = false; + total_flex_factor = total_shrink; + // Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line + // is less than 1, they will take up less than 100% of the free space. + // https://www.w3.org/TR/css-flexbox-1/#valdef-flex-flex-grow + if(total_flex_factor < 1000) + { + for(auto &item : items) + { + item->main_size += initial_free_space * item->shrink / 1000; + } + return; + } + } else + { + grow = true; + total_flex_factor = total_grow; + // Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line + // is less than 1, they will take up less than 100% of the free space. + // https://www.w3.org/TR/css-flexbox-1/#valdef-flex-flex-grow + if(total_flex_factor < 1000) + { + for(auto &item : items) + { + item->main_size += initial_free_space * item->grow / 1000; + } + return; + } + } + + if(total_flex_factor > 0) + { + bool processed = true; + while (processed) + { + int sum_scaled_flex_shrink_factor = 0; + int sum_flex_factors = 0; + int remaining_free_space = container_main_size; + int total_not_frozen = 0; + for (auto &item: items) + { + if (!item->frozen) + { + sum_scaled_flex_shrink_factor += item->scaled_flex_shrink_factor; + if(grow) + { + sum_flex_factors += item->grow; + } else + { + sum_flex_factors += item->shrink; + } + remaining_free_space -= item->base_size; + total_not_frozen++; + } else + { + remaining_free_space -= item->main_size; + } + } + // Check for flexible items. If all the flex items on the line are frozen, free space has + // been distributed; exit this loop. + if (!total_not_frozen) break; + + remaining_free_space = abs(remaining_free_space); + // c. Distribute free space proportional to the flex factors. + // If the remaining free space is zero + // Do nothing. + if (!remaining_free_space) + { + processed = false; + } else + { + int total_clamped = 0; + for (auto &item: items) + { + if (!item->frozen) + { + if(!grow) + { + // If using the flex shrink factor + // For every unfrozen item on the line, multiply its flex shrink factor by its + // inner flex base size, and note this as its scaled flex shrink factor. Find + // the ratio of the item’s scaled flex shrink factor to the sum of the scaled + // flex shrink factors of all unfrozen items on the line. Set the item’s target + // main size to its flex base size minus a fraction of the absolute value of the + // remaining free space proportional to the ratio. + int scaled_flex_shrink_factor = item->base_size * item->shrink; + item->main_size = (int) ((float) item->base_size - (float) remaining_free_space * + (float) scaled_flex_shrink_factor / + (float) sum_scaled_flex_shrink_factor); + + // d. Fix min/max violations. Clamp each non-frozen item’s target main size by its used + // min and max main sizes and floor its content-box size at zero. If the item’s target + // main size was made smaller by this, it’s a max violation. If the item’s target main + // size was made larger by this, it’s a min violation. + if (item->main_size <= item->min_size) + { + total_clamped++; + item->main_size = item->min_size; + item->frozen = true; + } + if(!item->max_size.is_default() && item->main_size >= item->max_size) + { + total_clamped++; + item->main_size = item->max_size; + item->frozen = true; + } + } else + { + // If using the flex grow factor + // Find the ratio of the item’s flex grow factor to the sum of the flex grow + // factors of all unfrozen items on the line. Set the item’s target main size to + // its flex base size plus a fraction of the remaining free space proportional + // to the ratio. + item->main_size = (int) ((float) item->base_size + + (float) remaining_free_space * (float) item->grow / + (float) total_flex_factor); + // d. Fix min/max violations. Clamp each non-frozen item’s target main size by its used + // min and max main sizes and floor its content-box size at zero. If the item’s target + // main size was made smaller by this, it’s a max violation. If the item’s target main + // size was made larger by this, it’s a min violation. + if (item->main_size >= container_main_size) + { + total_clamped++; + item->main_size = container_main_size; + item->frozen = true; + } + if(!item->max_size.is_default() && item->main_size >= item->max_size) + { + total_clamped++; + item->main_size = item->max_size; + item->frozen = true; + } + } + } + } + if (total_clamped == 0) processed = false; + } + } + // Distribute remaining after algorithm space + int sum_main_size = 0; + for(auto &item : items) + { + sum_main_size += item->main_size; + } + int free_space = container_main_size - sum_main_size; + if(free_space > 0) + { + for(auto &item : items) + { + if(free_space == 0) break; + item->main_size++; + free_space--; + } + } + } +} + +bool litehtml::flex_line::distribute_main_auto_margins(int free_main_size) +{ + if(free_main_size > 0 && (num_auto_margin_main_start || num_auto_margin_main_end)) + { + int add = (int) (free_main_size / (items.size() * 2)); + for (auto &item: items) + { + if(!item->auto_margin_main_start.is_default()) + { + item->auto_margin_main_start = add; + item->main_size += add; + main_size += add; + free_main_size -= add; + } + if(!item->auto_margin_main_end.is_default()) + { + item->auto_margin_main_end = add; + item->main_size += add; + main_size += add; + free_main_size -= add; + } + } + while (free_main_size > 0) + { + for (auto &item: items) + { + if(!item->auto_margin_main_start.is_default()) + { + item->auto_margin_main_start = item->auto_margin_main_start + 1; + free_main_size--; + if(!free_main_size) break; + } + if(!item->auto_margin_main_end.is_default()) + { + item->auto_margin_main_end = item->auto_margin_main_end + 1; + free_main_size--; + if(!free_main_size) break; + } + } + } + return true; + } + return false; +} + +void litehtml::flex_line::init(int container_main_size, bool fit_container, bool is_row_direction, + const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx) +{ + cross_size = 0; + main_size = 0; + first_baseline.set(0, baseline::baseline_type_none); + last_baseline.set(0, baseline::baseline_type_none); + + if(!fit_container) + { + distribute_free_space(container_main_size); + } + + if(is_row_direction) + { + def_value first_baseline_top = 0; + def_value first_baseline_bottom = 0; + def_value last_baseline_top = 0; + def_value last_baseline_bottom = 0; + int non_baseline_height = 0; + + // Calculate maximum cross size + def_value max_cross_size(0); + if(self_size.height.type != containing_block_context::cbc_value_type_auto) + { + max_cross_size = self_size.height; + } + if(self_size.max_height.type != containing_block_context::cbc_value_type_none) + { + if(max_cross_size.is_default()) + { + max_cross_size = self_size.max_height; + } else + { + max_cross_size = std::max((int) max_cross_size, (int) self_size.max_height); + } + } + + /// Render items into new size + /// Find line cross_size + /// Find line first/last baseline + for (auto &item: items) + { + item->el->render(0, + 0, + self_size.new_width(item->main_size - item->el->content_offset_width(), containing_block_context::size_mode_exact_width), fmt_ctx, false); + + if((item->align & 0xFF) == flex_align_items_baseline) + { + if(item->align & flex_align_items_last) + { + last_baseline.type(reverse_cross ? baseline::baseline_type_top : baseline::baseline_type_bottom); + + int top = -item->el->get_last_baseline(); + int bottom = top + item->el->height(); + + if(last_baseline_top.is_default()) last_baseline_top = top; + else last_baseline_top = std::min((int) last_baseline_top, top); + + if(last_baseline_bottom.is_default()) last_baseline_bottom = bottom; + else last_baseline_bottom = std::max((int)last_baseline_bottom, bottom); + } else + { + first_baseline.type(reverse_cross ? baseline::baseline_type_bottom : baseline::baseline_type_top); + int top = -item->el->get_first_baseline(); + int bottom = top + item->el->height(); + + if(first_baseline_top.is_default()) first_baseline_top = top; + else first_baseline_top = std::min((int) first_baseline_top, top); + + if(first_baseline_bottom.is_default()) first_baseline_bottom = bottom; + else first_baseline_bottom = std::max((int) first_baseline_bottom, bottom); + } + } else + { + non_baseline_height = std::max(non_baseline_height, item->el->height()); + } + main_size += item->el->width(); + } + + cross_size = std::max(first_baseline_bottom - first_baseline_top,last_baseline_bottom - last_baseline_top); + cross_size = std::max(cross_size, non_baseline_height); + if(!max_cross_size.is_default() && cross_size > max_cross_size) + { + cross_size = max_cross_size; + } + + first_baseline.calc(first_baseline_top, first_baseline_bottom); + last_baseline.calc(last_baseline_top, last_baseline_bottom); + } else + { + // Calculate maximum cross size + def_value max_cross_size(0); + if(self_size.width.type != containing_block_context::cbc_value_type_auto) + { + max_cross_size = self_size.width; + } + if(self_size.max_width.type != containing_block_context::cbc_value_type_none) + { + if(max_cross_size.is_default()) + { + max_cross_size = self_size.max_width; + } else + { + max_cross_size = std::max((int) max_cross_size, (int) self_size.max_width); + } + } + + for (auto &item: items) + { + int el_ret_width = item->el->render(0, + 0, + self_size, fmt_ctx, false); + item->el->render(0, + 0, + self_size.new_width_height(el_ret_width - item->el->content_offset_width(), + item->main_size - item->el->content_offset_height(), + containing_block_context::size_mode_exact_width | + containing_block_context::size_mode_exact_height), + fmt_ctx, false); + main_size += item->el->height(); + cross_size = std::max(cross_size, item->el->width()); + } + if(!max_cross_size.is_default() && cross_size > max_cross_size) + { + cross_size = max_cross_size; + } + } +} + +int litehtml::flex_line::calculate_items_position(int container_main_size, + flex_justify_content justify_content, + bool is_row_direction, + const containing_block_context &self_size, + formatting_context *fmt_ctx) +{ + /// Distribute main axis free space for auto-margins + int free_main_size = container_main_size - main_size; + distribute_main_auto_margins(free_main_size); + free_main_size = container_main_size - main_size; + + /// Fix justify-content property + switch (justify_content) + { + case flex_justify_content_left: + case flex_justify_content_right: + if(!is_row_direction) + { + justify_content = flex_justify_content_start; + } + break; + case flex_justify_content_space_between: + // If the leftover free-space is negative or there is only a single flex item on the line, this + // value is identical to flex-start. + if(items.size() == 1 || free_main_size < 0) justify_content = flex_justify_content_flex_start; + break; + case flex_justify_content_space_around: + case flex_justify_content_space_evenly: + // If the leftover free-space is negative or there is only a single flex item on the line, this + // value is identical to center + if(items.size() == 1 || free_main_size < 0) justify_content = flex_justify_content_center; + break; + default: + break; + } + + /// Distribute free main size using justify-content property + int main_pos = 0; + int add_before_item = 0; + int add_after_item = 0; + int item_remainder = 0; + + /// find initial main position and spaces between items + switch (justify_content) + { + + case flex_justify_content_right: + main_pos = free_main_size; + break; + case flex_justify_content_left: + case flex_justify_content_start: + main_pos = 0; + break; + case flex_justify_content_end: + main_pos = free_main_size; + break; + case flex_justify_content_flex_end: + if(!reverse_main) + { + main_pos = free_main_size; + } + break; + case flex_justify_content_center: + main_pos = free_main_size / 2; + break; + case flex_justify_content_space_between: + add_after_item = free_main_size / ((int) items.size() - 1); + item_remainder = free_main_size - (add_after_item * ((int) items.size() - 1)); + break; + case flex_justify_content_space_around: + add_after_item = add_before_item = free_main_size / ((int) items.size() * 2); + item_remainder = free_main_size - (add_after_item * (int) items.size() * 2); + break; + case flex_justify_content_space_evenly: + add_before_item = free_main_size / ((int) items.size() + 1); + item_remainder = free_main_size - add_before_item * ((int) items.size() + 1); + break; + default: + if(reverse_main) + { + main_pos = free_main_size; + } + break; + } + + /// Place all items in main and cross positions + int height = 0; + for(auto &item : items) + { + main_pos += add_before_item; + if(add_before_item > 0 && item_remainder > 0) + { + main_pos++; + item_remainder--; + } + item->place(*this, main_pos, self_size, fmt_ctx); + main_pos += item->get_el_main_size() + add_after_item; + if(add_after_item > 0 && item_remainder > 0) + { + main_pos++; + item_remainder--; + } + height = std::max(height, item->el->bottom()); + } + return height; +} diff --git a/src/html_tag.cpp b/src/html_tag.cpp index ab2c45e9..1814e9c3 100644 --- a/src/html_tag.cpp +++ b/src/html_tag.cpp @@ -367,6 +367,11 @@ int litehtml::html_tag::get_enum_property(string_id name, bool inherited, int de return get_property_impl(name, inherited, default_value, css_properties_member_offset); } +int litehtml::html_tag::get_int_property(string_id name, bool inherited, int default_value, uint_ptr css_properties_member_offset) const +{ + return get_property_impl(name, inherited, default_value, css_properties_member_offset); +} + litehtml::css_length litehtml::html_tag::get_length_property(string_id name, bool inherited, css_length default_value, uint_ptr css_properties_member_offset) const { return get_property_impl(name, inherited, default_value, css_properties_member_offset); diff --git a/src/line_box.cpp b/src/line_box.cpp index 1ca9c85d..e739e63c 100644 --- a/src/line_box.cpp +++ b/src/line_box.cpp @@ -363,7 +363,7 @@ std::list< std::unique_ptr > litehtml::line_box::finish case va_super: { int bl = calc_va_baseline(current_context, lbi->get_el()->css().get_vertical_align(), current_context.fm, line_top, line_bottom); - lbi->pos().y = bl - lbi->get_el()->height() + lbi->get_el()->get_base_line() + + lbi->pos().y = bl - lbi->get_el()->get_last_baseline() + lbi->get_el()->content_offset_top(); } break; @@ -374,7 +374,7 @@ std::list< std::unique_ptr > litehtml::line_box::finish lbi->pos().y = line_top + lbi->get_el()->content_offset_top(); break; case va_baseline: - lbi->pos().y = current_context.baseline - lbi->get_el()->height() + lbi->get_el()->get_base_line() + + lbi->pos().y = current_context.baseline - lbi->get_el()->get_last_baseline() + lbi->get_el()->content_offset_top(); break; case va_text_top: @@ -555,10 +555,23 @@ bool litehtml::line_box::can_hold(const std::unique_ptr& item, wh if(item->get_type() == line_box_item::type_text_part) { + // force new line on floats clearing + if (item->get_el()->src_el()->is_break() && item->get_el()->src_el()->css().get_clear() != clear_none) + { + return false; + } + auto last_el = get_last_text_part(); + // the first word is always can be hold + if(!last_el) + { + return true; + } + // force new line if the last placed element was line break - if (last_el && last_el->src_el()->is_break()) + // Skip If there are the only break item - this is float clearing + if (last_el && last_el->src_el()->is_break() && m_items.size() > 1) { return false; } @@ -597,6 +610,12 @@ bool litehtml::line_box::have_last_space() const bool litehtml::line_box::is_empty() const { if(m_items.empty()) return true; + if(m_items.size() == 1 && + m_items.front()->get_el()->src_el()->is_break() && + m_items.front()->get_el()->src_el()->css().get_clear() != clear_none) + { + return true; + } for (const auto& el : m_items) { if(el->get_type() == line_box_item::type_text_part) diff --git a/src/render_block.cpp b/src/render_block.cpp index d653f311..c170c341 100644 --- a/src/render_block.cpp +++ b/src/render_block.cpp @@ -208,24 +208,21 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co bool requires_rerender = false; // when true, the second pass for content rendering is required // Set block width - if(self_size.width.type == containing_block_context::cbc_value_type_absolute) + if(!(containing_block_size.size_mode & containing_block_context::size_mode_content)) { - ret_width = m_pos.width = self_size.render_width; - } else if(self_size.width.type == containing_block_context::cbc_value_type_percentage) - { - m_pos.width = self_size.render_width; + if(self_size.width.type == containing_block_context::cbc_value_type_absolute) + { + ret_width = m_pos.width = self_size.render_width; + } else + { + m_pos.width = self_size.render_width; + } } else { - m_pos.width = self_size.render_width; - } - - // Fix width with min-width attribute - if(self_size.min_width.type != containing_block_context::cbc_value_type_none) - { - if(m_pos.width < self_size.min_width) + m_pos.width = ret_width; + if(self_size.width.type == containing_block_context::cbc_value_type_absolute && ret_width > self_size.width) { - m_pos.width = self_size.min_width; - requires_rerender = true; + ret_width = self_size.width; } } @@ -239,6 +236,19 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co } } + // Fix width with min-width attribute + if(self_size.min_width.type != containing_block_context::cbc_value_type_none) + { + if(m_pos.width < self_size.min_width) + { + m_pos.width = self_size.min_width; + requires_rerender = true; + } + } else if(m_pos.width < 0) + { + m_pos.width = 0; + } + // re-render content with new width if required if (requires_rerender && !second_pass && !is_root()) { @@ -254,25 +264,44 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co } // Set block height - if (self_size.height.type != containing_block_context::cbc_value_type_auto) + if (self_size.height.type != containing_block_context::cbc_value_type_auto && + !(containing_block_size.size_mode & containing_block_context::size_mode_content)) { - if(self_size.height > 0) + // TODO: Something wrong here + // Percentage height from undefined containing block height is usually <= 0 + if(self_size.height.type == containing_block_context::cbc_value_type_percentage) + { + if (self_size.height > 0) + { + m_pos.height = self_size.height; + } + } else { m_pos.height = self_size.height; } - if(src_el()->css().get_box_sizing() == box_sizing_border_box) + if (src_el()->css().get_box_sizing() == box_sizing_border_box) { m_pos.height -= box_sizing_height(); } } else if (src_el()->is_block_formatting_context()) - { + { // add the floats' height to the block height - int floats_height = fmt_ctx->get_floats_height(); - if (floats_height > m_pos.height) - { - m_pos.height = floats_height; - } - } + int floats_height = fmt_ctx->get_floats_height(); + if (floats_height > m_pos.height) + { + m_pos.height = floats_height; + } + } + if(containing_block_size.size_mode & containing_block_context::size_mode_content) + { + if(self_size.height.type == containing_block_context::cbc_value_type_absolute) + { + if(m_pos.height > self_size.height) + { + m_pos.height = self_size.height; + } + } + } // Fix height with min-height attribute if(self_size.min_height.type != containing_block_context::cbc_value_type_none) @@ -281,6 +310,9 @@ int litehtml::render_item_block::_render(int x, int y, const containing_block_co { m_pos.height = self_size.min_height; } + } else if(m_pos.height < 0) + { + m_pos.height = 0; } // Fix width with max-width attribute diff --git a/src/render_block_context.cpp b/src/render_block_context.cpp index 7591378c..bf6b0927 100644 --- a/src/render_block_context.cpp +++ b/src/render_block_context.cpp @@ -47,20 +47,26 @@ int litehtml::render_item_block_context::_render_content(int x, int y, bool seco // Collapse top margin if(is_first && collapse_top_margin()) { - child_top -= el->get_margins().top; - if(el->get_margins().top > get_margins().top) - { - m_margins.top = el->get_margins().top; - } + if(el->get_margins().top > 0) + { + child_top -= el->get_margins().top; + if (el->get_margins().top > get_margins().top) + { + m_margins.top = el->get_margins().top; + } + } } else { - if(last_margin > el->get_margins().top) - { - child_top -= el->get_margins().top; - } else - { - child_top -= last_margin; - } + if(el->get_margins().top > 0) + { + if (last_margin > el->get_margins().top) + { + child_top -= el->get_margins().top; + } else + { + child_top -= last_margin; + } + } } if(el->src_el()->is_replaced() || el->src_el()->is_block_formatting_context() || el->src_el()->css().get_display() == display_table) @@ -104,10 +110,9 @@ int litehtml::render_item_block_context::_render_content(int x, int y, bool seco } } - int block_height = 0; - if (get_predefined_height(block_height, self_size.height)) + if (self_size.height.type != containing_block_context::cbc_value_type_auto && self_size.height > 0) { - m_pos.height = block_height; + m_pos.height = self_size.height; } else { m_pos.height = child_top; @@ -127,3 +132,23 @@ int litehtml::render_item_block_context::_render_content(int x, int y, bool seco return ret_width; } + +int litehtml::render_item_block_context::get_first_baseline() +{ + if(m_children.empty()) + { + return height() - margin_bottom(); + } + const auto &item = m_children.front(); + return content_offset_top() + item->top() + item->get_first_baseline(); +} + +int litehtml::render_item_block_context::get_last_baseline() +{ + if(m_children.empty()) + { + return height() - margin_bottom(); + } + const auto &item = m_children.back(); + return content_offset_top() + item->top() + item->get_last_baseline(); +} diff --git a/src/render_flex.cpp b/src/render_flex.cpp index 2cab59e0..d0170e65 100644 --- a/src/render_flex.cpp +++ b/src/render_flex.cpp @@ -4,12 +4,327 @@ int litehtml::render_item_flex::_render_content(int x, int y, bool second_pass, const containing_block_context &self_size, formatting_context* fmt_ctx) { - return 0; + bool is_row_direction = true; + bool reverse = false; + int container_main_size = self_size.render_width; + + switch (css().get_flex_direction()) + { + case flex_direction_column: + is_row_direction = false; + reverse = false; + break; + case flex_direction_column_reverse: + is_row_direction = false; + reverse = true; + break; + case flex_direction_row: + is_row_direction = true; + reverse = false; + break; + case flex_direction_row_reverse: + is_row_direction = true; + reverse = true; + break; + } + + bool single_line = css().get_flex_wrap() == flex_wrap_nowrap; + bool fit_container = false; + + if(!is_row_direction) + { + if(self_size.height.type != containing_block_context::cbc_value_type_auto) + { + container_main_size = self_size.height; + if (css().get_box_sizing() == box_sizing_border_box) + { + container_main_size -= box_sizing_height(); + } + } else + { + // Direction columns, height is auto - always in single line + container_main_size = 0; + single_line = true; + fit_container = true; + } + if(self_size.min_height.type != containing_block_context::cbc_value_type_auto && self_size.min_height > container_main_size) + { + container_main_size = self_size.min_height; + } + if(self_size.max_height.type != containing_block_context::cbc_value_type_auto && self_size.max_height > container_main_size) + { + container_main_size = self_size.max_height; + single_line = false; + } + } + + ///////////////////////////////////////////////////////////////// + /// Split flex items to lines + ///////////////////////////////////////////////////////////////// + m_lines = get_lines(self_size, fmt_ctx, is_row_direction, container_main_size, single_line); + + int el_y = 0; + int el_x = 0; + int sum_cross_size = 0; + int sum_main_size = 0; + int ret_width = 0; + + ///////////////////////////////////////////////////////////////// + /// Resolving Flexible Lengths + /// REF: https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths + ///////////////////////////////////////////////////////////////// + for(auto& ln : m_lines) + { + if(is_row_direction) + { + ret_width += ln.base_size; + } + ln.init(container_main_size, fit_container, is_row_direction, self_size, fmt_ctx); + sum_cross_size += ln.cross_size; + sum_main_size = std::max(sum_main_size, ln.main_size); + if(reverse) + { + ln.items.reverse(); + } + } + + int free_cross_size = 0; + int cross_start = 0; + bool is_wrap_reverse = css().get_flex_wrap() == flex_wrap_wrap_reverse; + if(container_main_size == 0) + { + container_main_size = sum_main_size; + } + + ///////////////////////////////////////////////////////////////// + /// Calculate free cross size + ///////////////////////////////////////////////////////////////// + if (is_row_direction) + { + cross_start = content_offset_top(); + if (self_size.height.type != containing_block_context::cbc_value_type_auto) + { + int height = self_size.height; + if (src_el()->css().get_box_sizing() == box_sizing_border_box) + { + height -= box_sizing_height(); + } + free_cross_size = height - sum_cross_size; + } + } else + { + cross_start = content_offset_left(); + free_cross_size = self_size.render_width - sum_cross_size; + ret_width = sum_cross_size; + } + + ///////////////////////////////////////////////////////////////// + /// Fix align-content property + ///////////////////////////////////////////////////////////////// + flex_align_content align_content = css().get_flex_align_content(); + if(align_content == flex_align_content_space_between) + { + // If the leftover free-space is negative or there is only a single flex line in the flex + // container, this value is identical to flex-start. + if (m_lines.size() == 1 || free_cross_size < 0) align_content = flex_align_content_flex_start; + } + if(align_content == flex_align_content_space_around) + { + // If the leftover free-space is negative or there is only a single flex line in the flex + // container, this value is identical to flex-start. + if (m_lines.size() == 1 || free_cross_size < 0) align_content = flex_align_content_center; + } + + ///////////////////////////////////////////////////////////////// + /// Distribute free cross size for align-content: stretch + ///////////////////////////////////////////////////////////////// + if(css().get_flex_align_content() == flex_align_content_stretch && free_cross_size > 0) + { + int add = (int)((double) free_cross_size / (double) m_lines.size()); + if(add > 0) + { + for (auto &ln: m_lines) + { + ln.cross_size += add; + free_cross_size -= add; + } + } + if(!m_lines.empty()) + { + while (free_cross_size > 0) + { + for (auto &ln: m_lines) + { + ln.cross_size++; + free_cross_size--; + } + } + } + } + + /// Reverse lines for flex-wrap: wrap-reverse + if(css().get_flex_wrap() == flex_wrap_wrap_reverse) + { + m_lines.reverse(); + } + + ///////////////////////////////////////////////////////////////// + /// Align flex lines + ///////////////////////////////////////////////////////////////// + int line_pos = 0; + int add_before_line = 0; + int add_after_line = 0; + switch (align_content) + { + case flex_align_content_flex_start: + if(is_wrap_reverse) + { + line_pos = free_cross_size; + } + break; + case flex_align_content_flex_end: + if(!is_wrap_reverse) + { + line_pos = free_cross_size; + } + break; + case flex_align_content_end: + line_pos = free_cross_size; + break; + case flex_align_content_center: + line_pos = free_cross_size / 2; + break; + case flex_align_content_space_between: + add_after_line = free_cross_size / ((int) m_lines.size() - 1); + break; + case flex_align_content_space_around: + add_before_line = add_after_line = free_cross_size / ((int) m_lines.size() * 2); + break; + default: + if(is_wrap_reverse) + { + line_pos = free_cross_size; + } + break; + } + for(auto &ln : m_lines) + { + line_pos += add_before_line; + ln.cross_start = line_pos; + line_pos += ln.cross_size + add_after_line; + } + + /// Fix justify-content property + flex_justify_content justify_content = css().get_flex_justify_content(); + if((justify_content == flex_justify_content_right || justify_content == flex_justify_content_left) && !is_row_direction) + { + justify_content = flex_justify_content_start; + } + + ///////////////////////////////////////////////////////////////// + /// Align flex items in flex lines + ///////////////////////////////////////////////////////////////// + int line_num = 0; + for(auto &ln : m_lines) + { + int height = ln.calculate_items_position(container_main_size, + justify_content, + is_row_direction, + self_size, + fmt_ctx); + line_num++; + m_pos.height = std::max(m_pos.height, height); + } + + // calculate the final position + m_pos.move_to(x, y); + m_pos.x += content_offset_left(); + m_pos.y += content_offset_top(); + + return ret_width; } -void litehtml::render_item_flex::draw_children(uint_ptr hdc, int x, int y, const position* clip, draw_flag flag, int zindex) +std::list litehtml::render_item_flex::get_lines(const litehtml::containing_block_context &self_size, + litehtml::formatting_context *fmt_ctx, + bool is_row_direction, int container_main_size, + bool single_line) { + bool reverse_main; + bool reverse_cross = css().get_flex_wrap() == flex_wrap_wrap_reverse; + + if(is_row_direction) + { + reverse_main = css().get_flex_direction() == flex_direction_row_reverse; + } else + { + reverse_main = css().get_flex_direction() == flex_direction_column_reverse; + } + + std::list lines; + flex_line line(reverse_main, reverse_cross); + std::list> items; + int src_order = 0; + bool sort_required = false; + def_value prev_order(0); + + for( auto& el : m_children) + { + std::shared_ptr item = nullptr; + if(is_row_direction) + { + item = std::make_shared(el); + } else + { + item = std::make_shared(el); + } + item->init(self_size, fmt_ctx, css().get_flex_align_items()); + item->src_order = src_order++; + if(prev_order.is_default()) + { + prev_order = item->order; + } else if(!sort_required && item->order != prev_order) + { + sort_required = true; + } + + items.emplace_back(item); + } + + if(sort_required) + { + items.sort([](const std::shared_ptr& item1, const std::shared_ptr& item2) + { + if(item1->order < item2->order) return true; + if(item1->order == item2->order) + { + return item1->src_order < item2->src_order; + } + return false; + }); + } + + // Add flex items to lines + for(auto& item : items) + { + if(!line.items.empty() && !single_line && line.base_size + item->base_size > container_main_size) + { + lines.emplace_back(line); + line = flex_line(reverse_main, reverse_cross); + } + line.base_size += item->base_size; + line.total_grow += item->grow; + line.total_shrink += item->shrink; + if(!item->auto_margin_main_start.is_default()) line.num_auto_margin_main_start++; + if(!item->auto_margin_main_end.is_default()) line.num_auto_margin_main_end++; + line.items.push_back(item); + } + // Add the last line to the lines list + if(!line.items.empty()) + { + lines.emplace_back(line); + } + return lines; } std::shared_ptr litehtml::render_item_flex::init() @@ -81,10 +396,60 @@ std::shared_ptr litehtml::render_item_flex::init() } convert_inlines(); children() = new_children; - for(const auto& el : children()) - { - m_flex_items.emplace_back(new flex_item(el)); - } return shared_from_this(); } + +int litehtml::render_item_flex::get_first_baseline() +{ + if(css().get_flex_direction() == flex_direction_row || css().get_flex_direction() == flex_direction_row_reverse) + { + if(!m_lines.empty()) + { + const auto &first_line = m_lines.front(); + if(first_line.first_baseline.type() != baseline::baseline_type_none) + { + return first_line.cross_start + first_line.first_baseline.get_offset_from_top(first_line.cross_size) + content_offset_top(); + } + if(first_line.last_baseline.type() != baseline::baseline_type_none) + { + return first_line.cross_start + first_line.last_baseline.get_offset_from_top(first_line.cross_size) + content_offset_top(); + } + } + } + if(!m_lines.empty()) + { + if(!m_lines.front().items.empty()) + { + return m_lines.front().items.front()->el->get_first_baseline() + content_offset_top(); + } + } + return height(); +} + +int litehtml::render_item_flex::get_last_baseline() +{ + if(css().get_flex_direction() == flex_direction_row || css().get_flex_direction() == flex_direction_row_reverse) + { + if(!m_lines.empty()) + { + const auto &first_line = m_lines.front(); + if(first_line.last_baseline.type() != baseline::baseline_type_none) + { + return first_line.cross_start + first_line.last_baseline.get_offset_from_top(first_line.cross_size) + content_offset_top(); + } + if(first_line.first_baseline.type() != baseline::baseline_type_none) + { + return first_line.cross_start + first_line.first_baseline.get_offset_from_top(first_line.cross_size) + content_offset_top(); + } + } + } + if(!m_lines.empty()) + { + if(!m_lines.front().items.empty()) + { + return m_lines.front().items.front()->el->get_last_baseline() + content_offset_top(); + } + } + return height(); +} diff --git a/src/render_image.cpp b/src/render_image.cpp index 63e622d7..1ff4574b 100644 --- a/src/render_image.cpp +++ b/src/render_image.cpp @@ -5,6 +5,7 @@ int litehtml::render_item_image::_render(int x, int y, const containing_block_context &containing_block_size, formatting_context* fmt_ctx, bool second_pass) { int parent_width = containing_block_size.width; + containing_block_context self_size = calculate_containing_block_context(containing_block_size); calc_outlines(parent_width); @@ -60,10 +61,10 @@ int litehtml::render_item_image::_render(int x, int y, const containing_block_co } } else if(!src_el()->css().get_height().is_predefined() && src_el()->css().get_width().is_predefined()) { - if (!get_predefined_height(m_pos.height, containing_block_size.height)) - { - m_pos.height = (int)src_el()->css().get_height().val(); - } + if(self_size.height.type != containing_block_context::cbc_value_type_auto && self_size.height > 0) + { + m_pos.height = self_size.height; + } // check for max-height if(!src_el()->css().get_max_height().is_predefined()) @@ -107,10 +108,10 @@ int litehtml::render_item_image::_render(int x, int y, const containing_block_co { m_pos.width = (int) src_el()->css().get_width().calc_percent(parent_width); m_pos.height = 0; - if (!get_predefined_height(m_pos.height, containing_block_size.height)) - { - m_pos.height = (int)src_el()->css().get_height().val(); - } + if(self_size.height.type != containing_block_context::cbc_value_type_auto && self_size.height > 0) + { + m_pos.height = self_size.height; + } // check for max-height if(!src_el()->css().get_max_height().is_predefined()) diff --git a/src/render_inline_context.cpp b/src/render_inline_context.cpp index 2d8f2e17..4f5d7701 100644 --- a/src/render_inline_context.cpp +++ b/src/render_inline_context.cpp @@ -382,21 +382,30 @@ void litehtml::render_item_inline_context::apply_vertical_align() } } -int litehtml::render_item_inline_context::get_base_line() +int litehtml::render_item_inline_context::get_first_baseline() { - auto el_parent = parent(); - if(el_parent && src_el()->css().get_display() == display_inline_flex) - { - return el_parent->get_base_line(); - } - if(src_el()->is_replaced()) - { - return 0; - } - int bl = 0; - if(!m_line_boxes.empty()) - { - bl = m_line_boxes.back()->baseline() + content_offset_bottom(); - } - return bl; + int bl; + if(!m_line_boxes.empty()) + { + const auto &line = m_line_boxes.front(); + bl = line->bottom() - line->baseline() + content_offset_top(); + } else + { + bl = height() - margin_bottom(); + } + return bl; +} + +int litehtml::render_item_inline_context::get_last_baseline() +{ + int bl; + if(!m_line_boxes.empty()) + { + const auto &line = m_line_boxes.back(); + bl = line->bottom() - line->baseline() + content_offset_top(); + } else + { + bl = height() - margin_bottom(); + } + return bl; } diff --git a/src/render_item.cpp b/src/render_item.cpp index 4eb25757..0af17280 100644 --- a/src/render_item.cpp +++ b/src/render_item.cpp @@ -138,37 +138,6 @@ void litehtml::render_item::apply_relative_shift(const containing_block_context } } -bool litehtml::render_item::get_predefined_height(int& p_height, int containing_block_height) const -{ - css_length h = src_el()->css().get_height(); - if(h.is_predefined()) - { - p_height = m_pos.height; - return false; - } - if(h.units() == css_units_percentage) - { - p_height = h.calc_percent(containing_block_height); - return containing_block_height > 0; - } - p_height = src_el()->get_document()->to_pixels(h, src_el()->css().get_font_size()); - return p_height > 0; -} - -int litehtml::render_item::calc_width(int defVal, int containing_block_width) const -{ - css_length w = src_el()->css().get_width(); - if(w.is_predefined() || src_el()->css().get_display() == display_table_cell) - { - return defVal; - } - if(w.units() == css_units_percentage) - { - return w.calc_percent(containing_block_width); - } - return src_el()->get_document()->to_pixels(w, src_el()->css().get_font_size()); -} - std::tuple< std::shared_ptr, std::shared_ptr, @@ -679,7 +648,7 @@ void litehtml::render_item::draw_children(uint_ptr hdc, int x, int y, const posi if (el->src_el()->is_inline() && el->src_el()->css().get_float() == float_none && !el->src_el()->is_positioned()) { el->src_el()->draw(hdc, pos.x, pos.y, clip, el); - if (el->src_el()->css().get_display() == display_inline_block) + if (el->src_el()->css().get_display() == display_inline_block || el->src_el()->css().get_display() == display_inline_flex) { el->draw_stacking_context(hdc, pos.x, pos.y, clip, false); process = false; @@ -816,7 +785,7 @@ std::shared_ptr litehtml::render_item::get_child_by_point(in } else { if( el->src_el()->css().get_float() == float_none && - el->src_el()->css().get_display() != display_inline_block) + el->src_el()->css().get_display() != display_inline_block && el->src_el()->css().get_display() != display_inline_flex) { element::ptr child = el->get_child_by_point(el_pos.x, el_pos.y, client_x, client_y, flag, zindex); if(child) @@ -845,25 +814,23 @@ std::shared_ptr litehtml::render_item::get_element_by_point(i z_indexes[i->src_el()->css().get_z_index()]; } - for(const auto& zindex : z_indexes) + for(auto iter = z_indexes.rbegin(); iter != z_indexes.rend(); iter++) { - if(zindex.first > 0) + if(iter->first > 0) { - ret = get_child_by_point(x, y, client_x, client_y, draw_positioned, zindex.first); - break; + ret = get_child_by_point(x, y, client_x, client_y, draw_positioned, iter->first); + if(ret) return ret; } } - if(ret) return ret; for(const auto& z_index : z_indexes) { if(z_index.first == 0) { ret = get_child_by_point(x, y, client_x, client_y, draw_positioned, z_index.first); - break; + if(ret) return ret; } } - if(ret) return ret; ret = get_child_by_point(x, y, client_x, client_y, draw_inlines, 0); if(ret) return ret; @@ -875,15 +842,14 @@ std::shared_ptr litehtml::render_item::get_element_by_point(i if(ret) return ret; - for(const auto& z_index : z_indexes) - { - if(z_index.first < 0) + for(auto iter = z_indexes.rbegin(); iter != z_indexes.rend(); iter++) + { + if(iter->first < 0) { - ret = get_child_by_point(x, y, client_x, client_y, draw_positioned, z_index.first); - break; + ret = get_child_by_point(x, y, client_x, client_y, draw_positioned, iter->first); + if(ret) return ret; } } - if(ret) return ret; if(src_el()->css().get_position() == element_position_fixed) { @@ -1042,8 +1008,55 @@ litehtml::containing_block_context litehtml::render_item::calculate_containing_b // We have to use aut value for display_table_cell also. if (src_el()->css().get_display() != display_table_cell) { - calc_cb_length(src_el()->css().get_width(), cb_context.width, ret.width); - calc_cb_length(src_el()->css().get_height(), cb_context.height, ret.height); + auto par = parent(); + if(cb_context.size_mode & containing_block_context::size_mode_exact_width) + { + ret.width.value = cb_context.width; + ret.width.type = containing_block_context::cbc_value_type_absolute; + } else + { + auto *width = &css().get_width(); + if(par && (par->css().get_display() == display_flex || par->css().get_display() == display_inline_flex)) + { + if(!css().get_flex_basis().is_predefined() && css().get_flex_basis().val() >= 0) + { + if(par->css().get_flex_direction() == flex_direction_row || par->css().get_flex_direction() == flex_direction_row_reverse) + { + ret.width.type = containing_block_context::cbc_value_type_auto; + ret.width.value = 0; + width = nullptr; + } + } + } + if(width) + { + calc_cb_length(*width, cb_context.width, ret.width); + } + } + if(cb_context.size_mode & containing_block_context::size_mode_exact_height) + { + ret.height.value = cb_context.height; + ret.height.type = containing_block_context::cbc_value_type_absolute; + } else + { + auto *height = &css().get_height(); + if(par && (par->css().get_display() == display_flex || par->css().get_display() == display_inline_flex)) + { + if(!css().get_flex_basis().is_predefined() && css().get_flex_basis().val() >= 0) + { + if(par->css().get_flex_direction() == flex_direction_column || par->css().get_flex_direction() == flex_direction_column_reverse) + { + ret.height.type = containing_block_context::cbc_value_type_auto; + ret.height.value = 0; + height = nullptr; + } + } + } + if(height) + { + calc_cb_length(*height, cb_context.height, ret.height); + } + } if (ret.width.type != containing_block_context::cbc_value_type_auto && (src_el()->css().get_display() == display_table || src_el()->is_root())) { ret.width.value -= content_offset_width(); @@ -1061,28 +1074,27 @@ litehtml::containing_block_context litehtml::render_item::calculate_containing_b calc_cb_length(src_el()->css().get_min_height(), cb_context.height, ret.min_height); calc_cb_length(src_el()->css().get_max_height(), cb_context.height, ret.max_height); - if (src_el()->css().get_box_sizing() == box_sizing_border_box) + // Fix box sizing + if(ret.width.type != containing_block_context::cbc_value_type_auto) { - if(ret.width.type != containing_block_context::cbc_value_type_auto) - { - ret.render_width = ret.width - box_sizing_width(); - } - if(ret.min_width.type != containing_block_context::cbc_value_type_none) - { - ret.min_width.value -= box_sizing_width(); - } - if(ret.max_width.type != containing_block_context::cbc_value_type_none) - { - ret.max_width.value -= box_sizing_width(); - } - if(ret.min_height.type != containing_block_context::cbc_value_type_none) - { - ret.min_height.value -= box_sizing_height(); - } - if(ret.max_height.type != containing_block_context::cbc_value_type_none) - { - ret.max_height.value -= box_sizing_height(); - } + ret.render_width = ret.width - box_sizing_width(); + } + if(ret.min_width.type != containing_block_context::cbc_value_type_none) + { + ret.min_width.value -= box_sizing_width(); } + if(ret.max_width.type != containing_block_context::cbc_value_type_none) + { + ret.max_width.value -= box_sizing_width(); + } + if(ret.min_height.type != containing_block_context::cbc_value_type_none) + { + ret.min_height.value -= box_sizing_height(); + } + if(ret.max_height.type != containing_block_context::cbc_value_type_none) + { + ret.max_height.value -= box_sizing_height(); + } + return ret; } diff --git a/src/render_table.cpp b/src/render_table.cpp index 1a385964..fdff1f82 100644 --- a/src/render_table.cpp +++ b/src/render_table.cpp @@ -261,10 +261,10 @@ int litehtml::render_item_table::_render(int x, int y, const containing_block_co // calculate block height int block_height = 0; - if (get_predefined_height(block_height, containing_block_size.height)) - { - block_height -= m_padding.height() + m_borders.height(); - } + if(self_size.height.type != containing_block_context::cbc_value_type_auto && self_size.height > 0) + { + block_height = self_size.height - (m_padding.height() + m_borders.height()); + } // calculate minimum height from m_css.get_min_height() int min_height = 0; diff --git a/src/style.cpp b/src/style.cpp index 2e462f48..356f49af 100644 --- a/src/style.cpp +++ b/src/style.cpp @@ -43,7 +43,7 @@ std::map style::m_valid_values = { _justify_content_, flex_justify_content_strings }, { _align_items_, flex_align_items_strings }, { _align_content_, flex_align_content_strings }, - { _align_self_, flex_align_self_strings }, + { _align_self_, flex_align_items_strings }, { _caption_side_, caption_side_strings }, }; @@ -128,9 +128,7 @@ void style::add_property(string_id name, const string& val, const string& baseur case _flex_direction_: case _flex_wrap_: case _justify_content_: - case _align_items_: case _align_content_: - case _align_self_: case _caption_side_: @@ -141,6 +139,11 @@ void style::add_property(string_id name, const string& val, const string& baseur } break; + case _align_items_: + case _align_self_: + parse_align_self(name, val, important); + break; + // case _text_indent_: case _padding_left_: @@ -536,6 +539,16 @@ void style::add_property(string_id name, const string& val, const string& baseur add_parsed_property(_flex_basis_, property_value(length, important)); break; + case _order_: // + { + char* end; + int int_val = (int) strtol(val.c_str(), &end, 10); + if(end[0] == '\0') + { + add_parsed_property(name, property_value(int_val, important)); + } + } + break; case _counter_increment_: case _counter_reset_: { @@ -981,14 +994,16 @@ void style::parse_font(const string& val, bool important) { string_vector szlh; split_string(token, szlh, "/"); - - auto size = css_length::from_string(szlh[0], font_size_strings, -1); - add_parsed_property(_font_size_, property_value(size, important)); - - if(szlh.size() == 2) + if(!szlh.empty()) { - auto height = css_length::from_string(szlh[1], "normal", -1); - add_parsed_property(_line_height_, property_value(height, important)); + auto size = css_length::from_string(szlh[0], font_size_strings, -1); + add_parsed_property(_font_size_, property_value(size, important)); + + if (szlh.size() == 2) + { + auto height = css_length::from_string(szlh[1], "normal", -1); + add_parsed_property(_line_height_, property_value(height, important)); + } } } else { @@ -1033,6 +1048,10 @@ void style::parse_flex(const string& val, bool important) float grow = t_strtof(tokens[0]); float shrink = t_strtof(tokens[1]); auto basis = css_length::from_string(tokens[2], flex_basis_strings, -1); + if(!basis.is_predefined() && basis.units() == css_units_none && basis.val() == 0) + { + basis.set_value(basis.val(), css_units_px); + } add_parsed_property(_flex_grow_, property_value(grow, important)); add_parsed_property(_flex_shrink_, property_value(shrink, important)); @@ -1047,6 +1066,7 @@ void style::parse_flex(const string& val, bool important) { float shrink = t_strtof(tokens[1]); add_parsed_property(_flex_shrink_, property_value(shrink, important)); + add_parsed_property(_flex_basis_, property_value(css_length(0), important)); } else { @@ -1060,22 +1080,65 @@ void style::parse_flex(const string& val, bool important) { float grow = t_strtof(tokens[0]); add_parsed_property(_flex_grow_, property_value(grow, important)); - - if (grow >= 1) - { - add_parsed_property(_flex_shrink_, property_value(1.f, important)); - add_parsed_property(_flex_basis_, property_value(css_length(0), important)); - } + add_parsed_property(_flex_shrink_, property_value(1.f, important)); + add_parsed_property(_flex_basis_, property_value(css_length(0), important)); } else { auto basis = css_length::from_string(tokens[0], flex_basis_strings, -1); + add_parsed_property(_flex_grow_, property_value(1.f, important)); + add_parsed_property(_flex_shrink_, property_value(1.f, important)); add_parsed_property(_flex_basis_, property_value(basis, important)); } } } } +void style::parse_align_self(string_id name, const string& val, bool important) +{ + string_vector tokens; + split_string(val, tokens, " "); + if(tokens.size() == 1) + { + int idx = value_index(val, m_valid_values[name]); + if (idx >= 0) + { + add_parsed_property(name, property_value(idx, important)); + } + } else + { + int val1 = 0; + int val2 = -1; + for(auto &token : tokens) + { + if(token == "first") + { + val1 |= flex_align_items_first; + } else if(token == "last") + { + val1 |= flex_align_items_last; + } else if(token == "safe") + { + val1 |= flex_align_items_safe; + } else if(token == "unsafe") + { + val1 |= flex_align_items_unsafe; + } else + { + int idx = value_index(token, m_valid_values[name]); + if(idx >= 0) + { + val2 = idx; + } + } + } + if(val2 >= 0) + { + add_parsed_property(name, property_value(val1 | val2, important)); + } + } +} + void style::add_parsed_property( string_id name, const property_value& propval ) { auto prop = m_properties.find(name); diff --git a/test/render/flex/--flex-minimum-height-flex-items-003.htm b/test/render/flex/--flex-minimum-height-flex-items-003.htm new file mode 100644 index 00000000..dfa7cb56 --- /dev/null +++ b/test/render/flex/--flex-minimum-height-flex-items-003.htm @@ -0,0 +1,54 @@ + + + + + + CSS Flexible Box Test: Minimum height of flex items + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-abspos-child-001a.htm b/test/render/flex/--flexbox-abspos-child-001a.htm new file mode 100644 index 00000000..44d48db9 --- /dev/null +++ b/test/render/flex/--flexbox-abspos-child-001a.htm @@ -0,0 +1,57 @@ + + + + + CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-abspos-child-001b.htm b/test/render/flex/--flexbox-abspos-child-001b.htm new file mode 100644 index 00000000..f216dc2e --- /dev/null +++ b/test/render/flex/--flexbox-abspos-child-001b.htm @@ -0,0 +1,58 @@ + + + + + CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-abspos-child-002.htm b/test/render/flex/--flexbox-abspos-child-002.htm new file mode 100644 index 00000000..e35c21d5 --- /dev/null +++ b/test/render/flex/--flexbox-abspos-child-002.htm @@ -0,0 +1,65 @@ + + + + + + + CSS Test: Test that "flex-basis" doesn't affect layout of abspos flex child + + + + + + + + + + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-baseline-single-item-001a.htm b/test/render/flex/--flexbox-baseline-single-item-001a.htm new file mode 100644 index 00000000..6bc2925f --- /dev/null +++ b/test/render/flex/--flexbox-baseline-single-item-001a.htm @@ -0,0 +1,55 @@ + + + + + CSS Test: Testing the baseline of a horizontal flex container with one flex item + + + + + + + + A +
a
+
a
+
a
+
a
+
a
+
+ +
abs
+
a
+ + +
+ + \ No newline at end of file diff --git a/test/render/flex/--flexbox-baseline-single-item-001b.htm b/test/render/flex/--flexbox-baseline-single-item-001b.htm new file mode 100644 index 00000000..2944a583 --- /dev/null +++ b/test/render/flex/--flexbox-baseline-single-item-001b.htm @@ -0,0 +1,56 @@ + + + + + CSS Test: Testing the baseline of a vertical flex container with one flex item + + + + + + + + A +
a
+
a
+
a
+
a
+
a
+
+ +
abs
+
a
+ + +
+ + \ No newline at end of file diff --git a/test/render/flex/--flexbox-flex-basis-content-002a.htm b/test/render/flex/--flexbox-flex-basis-content-002a.htm new file mode 100644 index 00000000..10306aad --- /dev/null +++ b/test/render/flex/--flexbox-flex-basis-content-002a.htm @@ -0,0 +1,87 @@ + + + + + + CSS Test: Testing "flex-basis: content" in a column-oriented flex container + + + + + + + + + + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + + + + + diff --git a/test/render/flex/--flexbox-flex-basis-content-002b.htm b/test/render/flex/--flexbox-flex-basis-content-002b.htm new file mode 100644 index 00000000..4790d20b --- /dev/null +++ b/test/render/flex/--flexbox-flex-basis-content-002b.htm @@ -0,0 +1,87 @@ + + + + + + CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand) + in a column-oriented flex container. + + + + + + + + + + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + + + + + diff --git a/test/render/flex/--flexbox-flex-basis-content-003a.htm b/test/render/flex/--flexbox-flex-basis-content-003a.htm new file mode 100644 index 00000000..b0e48f20 --- /dev/null +++ b/test/render/flex/--flexbox-flex-basis-content-003a.htm @@ -0,0 +1,124 @@ + + + + + + CSS Test: Testing that explicit "flex-basis: content" is treated as + "max-content" when calculating flex base size + + + + + + + + + + + +
+
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-flex-basis-content-003b.htm b/test/render/flex/--flexbox-flex-basis-content-003b.htm new file mode 100644 index 00000000..ad66c82f --- /dev/null +++ b/test/render/flex/--flexbox-flex-basis-content-003b.htm @@ -0,0 +1,125 @@ + + + + + + CSS Test: Testing that used "flex-basis: content" is treated as + "max-content" when calculating flex base size + + + + + + + + + + + +
+
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-flex-basis-content-004a.htm b/test/render/flex/--flexbox-flex-basis-content-004a.htm new file mode 100644 index 00000000..f7a36d39 --- /dev/null +++ b/test/render/flex/--flexbox-flex-basis-content-004a.htm @@ -0,0 +1,130 @@ + + + + + + CSS Test: Testing that explicit "flex-basis: content" is treated as + "max-content" when calculating flex base size + + + + + + + + + + + +
+
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-gap-position-absolute.htm b/test/render/flex/--flexbox-gap-position-absolute.htm new file mode 100644 index 00000000..5cae7070 --- /dev/null +++ b/test/render/flex/--flexbox-gap-position-absolute.htm @@ -0,0 +1,30 @@ + + + + + CSS Flexible Box Layout Test: Test flexbox intrinsic inline-size, gap, and absolute-positioned children + + + + + + + + + +
+ + + B + C +
+ + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-items-as-stacking-contexts-001.htm b/test/render/flex/--flexbox-items-as-stacking-contexts-001.htm new file mode 100644 index 00000000..b25d7321 --- /dev/null +++ b/test/render/flex/--flexbox-items-as-stacking-contexts-001.htm @@ -0,0 +1,116 @@ + + + + + + CSS Test: Testing that 'z-index' property makes flex items form stacking contexts + + + + + + + +
+
+
+
+ + +
+
+
+ +
+
+ +
+
+
+ + +
+
+
+ +
+
+ +
+
+
+ + +
+
+
+ +
+
+ +
+
+
+ + +
+
+
+ +
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-mbp-horiz-004.htm b/test/render/flex/--flexbox-mbp-horiz-004.htm new file mode 100644 index 00000000..c85ff591 --- /dev/null +++ b/test/render/flex/--flexbox-mbp-horiz-004.htm @@ -0,0 +1,72 @@ + + + + + + CSS Test: Testing percent-valued padding and margin on flex items + + + + + + + +
+ + +
+ + +
+ + +
+ + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-min-height-auto-001.htm b/test/render/flex/--flexbox-min-height-auto-001.htm new file mode 100644 index 00000000..a1d5d1e0 --- /dev/null +++ b/test/render/flex/--flexbox-min-height-auto-001.htm @@ -0,0 +1,105 @@ + + + + + + CSS Test: Testing min-height:auto + + + + + + + + + + +
+
+
+ +
+
+
+ +
+
+
+ + + +
+
+
+ +
+
+
+ +
+
+
+ + + +
+
+
+ +
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-min-height-auto-003.htm b/test/render/flex/--flexbox-min-height-auto-003.htm new file mode 100644 index 00000000..fe03ffff --- /dev/null +++ b/test/render/flex/--flexbox-min-height-auto-003.htm @@ -0,0 +1,60 @@ + + + + + + CSS Test: Testing min-height:auto & 'overflow' interaction + + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-min-height-auto-004.htm b/test/render/flex/--flexbox-min-height-auto-004.htm new file mode 100644 index 00000000..231da371 --- /dev/null +++ b/test/render/flex/--flexbox-min-height-auto-004.htm @@ -0,0 +1,66 @@ + + + + + + CSS Test: Testing min-height:auto & 'overflow' interaction + + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-min-width-auto-001.htm b/test/render/flex/--flexbox-min-width-auto-001.htm new file mode 100644 index 00000000..b4024df3 --- /dev/null +++ b/test/render/flex/--flexbox-min-width-auto-001.htm @@ -0,0 +1,103 @@ + + + + + + CSS Test: Testing min-width:auto + + + + + + + + + + +
+
+
+ +
+
+
+ +
+
+
+ + + +
+
+
+ +
+
+
+ +
+
+
+ + + +
+
+
+ +
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-min-width-auto-003.htm b/test/render/flex/--flexbox-min-width-auto-003.htm new file mode 100644 index 00000000..d7cf60f8 --- /dev/null +++ b/test/render/flex/--flexbox-min-width-auto-003.htm @@ -0,0 +1,58 @@ + + + + + + CSS Test: Testing min-width:auto & 'overflow' interaction + + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-min-width-auto-004.htm b/test/render/flex/--flexbox-min-width-auto-004.htm new file mode 100644 index 00000000..6fd481b1 --- /dev/null +++ b/test/render/flex/--flexbox-min-width-auto-004.htm @@ -0,0 +1,64 @@ + + + + + + CSS Test: Testing min-width:auto & 'overflow' interaction + + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-paint-ordering-001.htm b/test/render/flex/--flexbox-paint-ordering-001.htm new file mode 100644 index 00000000..9657a9fa --- /dev/null +++ b/test/render/flex/--flexbox-paint-ordering-001.htm @@ -0,0 +1,92 @@ + + + + + + CSS Test: Testing the paint-order of overlapping flex items, with varying tweaks on the container + + + + + + + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-paint-ordering-002.htm b/test/render/flex/--flexbox-paint-ordering-002.htm new file mode 100644 index 00000000..a8ea21a2 --- /dev/null +++ b/test/render/flex/--flexbox-paint-ordering-002.htm @@ -0,0 +1,164 @@ + + + + + + CSS Test: Testing the paint-order of overlapping flex items with 'order' and 'z-index' set + + + + + + + +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-single-line-clamp-3.htm b/test/render/flex/--flexbox-single-line-clamp-3.htm new file mode 100644 index 00000000..064864cb --- /dev/null +++ b/test/render/flex/--flexbox-single-line-clamp-3.htm @@ -0,0 +1,42 @@ + + + + +CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size. + + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-sizing-horiz-001.htm b/test/render/flex/--flexbox-sizing-horiz-001.htm new file mode 100644 index 00000000..665656ba --- /dev/null +++ b/test/render/flex/--flexbox-sizing-horiz-001.htm @@ -0,0 +1,86 @@ + + + + + + CSS Test: Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-sizing-horiz-002.htm b/test/render/flex/--flexbox-sizing-horiz-002.htm new file mode 100644 index 00000000..6f6f869b --- /dev/null +++ b/test/render/flex/--flexbox-sizing-horiz-002.htm @@ -0,0 +1,63 @@ + + + + + + CSS Test: Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints + + + + + + + +
+
text
+
+ + +
+
text
+
+ + +
+
text
+
+ + +
+
text
+
+ + +
+
text
+
+ + +
+
text
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-sizing-vert-001.htm b/test/render/flex/--flexbox-sizing-vert-001.htm new file mode 100644 index 00000000..e0a6542b --- /dev/null +++ b/test/render/flex/--flexbox-sizing-vert-001.htm @@ -0,0 +1,100 @@ + + + + + + CSS Test: Testing sizing of an auto-sized vertical flex container with min-height and max-height constraints + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-sizing-vert-002.htm b/test/render/flex/--flexbox-sizing-vert-002.htm new file mode 100644 index 00000000..64a451a6 --- /dev/null +++ b/test/render/flex/--flexbox-sizing-vert-002.htm @@ -0,0 +1,64 @@ + + + + + + CSS Test: Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints + + + + + + + +
+
AB
+
+ + +
+
AB
+
+ + +
+
AB
+
+ + +
+
AB
+
+ + +
+
AB
+
+ + +
+
AB
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox-with-pseudo-elements-003.htm b/test/render/flex/--flexbox-with-pseudo-elements-003.htm new file mode 100644 index 00000000..5939f15a --- /dev/null +++ b/test/render/flex/--flexbox-with-pseudo-elements-003.htm @@ -0,0 +1,69 @@ + + + + + CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item + + + + + + + +
+ x +
y
+ z +
+
+ x +
y
+ z +
+
+ x +
y
+ z +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_fbfc.htm b/test/render/flex/--flexbox_fbfc.htm new file mode 100644 index 00000000..3168b6f9 --- /dev/null +++ b/test/render/flex/--flexbox_fbfc.htm @@ -0,0 +1,35 @@ + + + +flexbox | flex formatting context :: float intrusion + + + + + +
filler
+ +
+
Yellow box should be below the blue box
+
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_fbfc2.htm b/test/render/flex/--flexbox_fbfc2.htm new file mode 100644 index 00000000..389e29ae --- /dev/null +++ b/test/render/flex/--flexbox_fbfc2.htm @@ -0,0 +1,33 @@ + + + +flexbox | flex formatting context :: float intrusion + + + + + +
float
+ +
+
Yellow box yellow box yellow box
+
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_flex-formatting-interop.htm b/test/render/flex/--flexbox_flex-formatting-interop.htm new file mode 100644 index 00000000..3fdfbd8f --- /dev/null +++ b/test/render/flex/--flexbox_flex-formatting-interop.htm @@ -0,0 +1,41 @@ + + + +flexbox | flex formatting context :: negative margins and + border box + + + + + +
float
+ +
+
xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx
+
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_flex-natural-mixed-basis.htm b/test/render/flex/--flexbox_flex-natural-mixed-basis.htm new file mode 100644 index 00000000..cc902e13 --- /dev/null +++ b/test/render/flex/--flexbox_flex-natural-mixed-basis.htm @@ -0,0 +1,39 @@ + + + +flexbox | flex: larger integer, mixed basis + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_flex-natural-variable-zero-basis.htm b/test/render/flex/--flexbox_flex-natural-variable-zero-basis.htm new file mode 100644 index 00000000..df74f95b --- /dev/null +++ b/test/render/flex/--flexbox_flex-natural-variable-zero-basis.htm @@ -0,0 +1,39 @@ + + + +flexbox | flex: larger integer, zero basis + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_flex-none-wrappable-content.htm b/test/render/flex/--flexbox_flex-none-wrappable-content.htm new file mode 100644 index 00000000..057a770f --- /dev/null +++ b/test/render/flex/--flexbox_flex-none-wrappable-content.htm @@ -0,0 +1,26 @@ + + + +Specifying flex:none on wrappable content should give content its full width + + + + + + + +
+
+ XXX XXX XXX +
+
+ +
You should see three green rectangles above, all on the same line.
+ + + diff --git a/test/render/flex/--flexbox_inline-abspos.htm b/test/render/flex/--flexbox_inline-abspos.htm new file mode 100644 index 00000000..abfa9179 --- /dev/null +++ b/test/render/flex/--flexbox_inline-abspos.htm @@ -0,0 +1,20 @@ + + + +flexbox | absolutely positioned inline + + + + + +
FAIL
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_inline-float.htm b/test/render/flex/--flexbox_inline-float.htm new file mode 100644 index 00000000..2631c110 --- /dev/null +++ b/test/render/flex/--flexbox_inline-float.htm @@ -0,0 +1,20 @@ + + + +flexbox | floated inline + + + + + +
FAIL
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_inline.htm b/test/render/flex/--flexbox_inline.htm new file mode 100644 index 00000000..2fad137c --- /dev/null +++ b/test/render/flex/--flexbox_inline.htm @@ -0,0 +1,20 @@ + + + +flexbox | inline + + + + + +
HELLOWORLD
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_order-abspos-space-around.htm b/test/render/flex/--flexbox_order-abspos-space-around.htm new file mode 100644 index 00000000..883cd24c --- /dev/null +++ b/test/render/flex/--flexbox_order-abspos-space-around.htm @@ -0,0 +1,39 @@ + + + +flexbox | order; justify-content: space-around + + + + + +
+ filler + + filler + filler +
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_stf-table-singleline-2.htm b/test/render/flex/--flexbox_stf-table-singleline-2.htm new file mode 100644 index 00000000..fc8065b2 --- /dev/null +++ b/test/render/flex/--flexbox_stf-table-singleline-2.htm @@ -0,0 +1,41 @@ + + + +flexbox | singleline flexcontainer versus stf :: table + + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + diff --git a/test/render/flex/--flexbox_table-fixed-layout.htm b/test/render/flex/--flexbox_table-fixed-layout.htm new file mode 100644 index 00000000..e369f734 --- /dev/null +++ b/test/render/flex/--flexbox_table-fixed-layout.htm @@ -0,0 +1,58 @@ + + + +flexbox | flexcontainers in tables + + + + + + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+		 +
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/--flexbox_width-overflow.htm b/test/render/flex/--flexbox_width-overflow.htm new file mode 100644 index 00000000..94175b78 --- /dev/null +++ b/test/render/flex/--flexbox_width-overflow.htm @@ -0,0 +1,30 @@ + + + +flexbox | overflow + + + + + +
+

one two three four

+

filler

+

filler

+

filler

+

filler

+
+ + + \ No newline at end of file diff --git a/test/render/flex/--multiline-shrink-to-fit.htm b/test/render/flex/--multiline-shrink-to-fit.htm new file mode 100644 index 00000000..f14c44a9 --- /dev/null +++ b/test/render/flex/--multiline-shrink-to-fit.htm @@ -0,0 +1,77 @@ + + + +CSS Flexbox: multiline column flexboxes and shrink-to-fit. + + + + + + +
+
+
+
+
+
+

The grey background should be 100px wide.

+ +
+
+
+
+
+
+

The grey background should be 100px wide.

+ +
+
+
+
+
+
+
+
+

The grey background should be 100px wide.

+ +
+
+
+
+
+
+
+
+

The grey background should be 100px wide and 5px should +stick out the bottom.

+ + + + + + \ No newline at end of file diff --git a/test/render/flex/--percentage-heights-008.htm b/test/render/flex/--percentage-heights-008.htm new file mode 100644 index 00000000..50ca6ebb --- /dev/null +++ b/test/render/flex/--percentage-heights-008.htm @@ -0,0 +1,39 @@ + + + +Fixed indefinite heights + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/--percentage-heights-010.htm b/test/render/flex/--percentage-heights-010.htm new file mode 100644 index 00000000..2edd8698 --- /dev/null +++ b/test/render/flex/--percentage-heights-010.htm @@ -0,0 +1,18 @@ + + + +A height: 100% descendant should trigger a relayout when stretching. + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-align-content-001.htm b/test/render/flex/-align-content-001.htm new file mode 100644 index 00000000..aa73086e --- /dev/null +++ b/test/render/flex/-align-content-001.htm @@ -0,0 +1,42 @@ + + + + + CSS Test: A multi-line flex container with the 'align-content' property set to 'center' + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-content-002.htm b/test/render/flex/-align-content-002.htm new file mode 100644 index 00000000..f3775be9 --- /dev/null +++ b/test/render/flex/-align-content-002.htm @@ -0,0 +1,41 @@ + + + + + CSS Test: A multi-line flex container with the 'align-content' property set to 'flex-start' + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-content-003.htm b/test/render/flex/-align-content-003.htm new file mode 100644 index 00000000..c18c287e --- /dev/null +++ b/test/render/flex/-align-content-003.htm @@ -0,0 +1,41 @@ + + + + + CSS Test: A multi-line flex container with the 'align-content' property set to 'flex-end' + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-content-004.htm b/test/render/flex/-align-content-004.htm new file mode 100644 index 00000000..3aef07d9 --- /dev/null +++ b/test/render/flex/-align-content-004.htm @@ -0,0 +1,43 @@ + + + + + CSS Test: A multi-line flex container with the 'align-content' property set to 'space-between' + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-content-005.htm b/test/render/flex/-align-content-005.htm new file mode 100644 index 00000000..dffc1adb --- /dev/null +++ b/test/render/flex/-align-content-005.htm @@ -0,0 +1,41 @@ + + + + + CSS Test: A multi-line flex container with the 'align-content' property set to 'space-around' + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-items-001.htm b/test/render/flex/-align-items-001.htm new file mode 100644 index 00000000..6847c017 --- /dev/null +++ b/test/render/flex/-align-items-001.htm @@ -0,0 +1,39 @@ + + + + + CSS Test: A flex container with the 'align-items' property set to 'center' + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-items-002.htm b/test/render/flex/-align-items-002.htm new file mode 100644 index 00000000..20270377 --- /dev/null +++ b/test/render/flex/-align-items-002.htm @@ -0,0 +1,40 @@ + + + + + CSS Test: A flex container with the 'align-items' property set to 'flex-start' + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-items-003.htm b/test/render/flex/-align-items-003.htm new file mode 100644 index 00000000..40f3807e --- /dev/null +++ b/test/render/flex/-align-items-003.htm @@ -0,0 +1,40 @@ + + + + + CSS Test: A flex container with the 'align-items' property set to 'flex-end' + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-align-items-004.htm b/test/render/flex/-align-items-004.htm new file mode 100644 index 00000000..a5e90f0e --- /dev/null +++ b/test/render/flex/-align-items-004.htm @@ -0,0 +1,53 @@ + + + + + CSS Test: A flex container with the 'align-items' property set to 'baseline' + + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
d1
+
d2
+
d3
+
d4
+
d5
+
d6
+
d7
+
d8
+
+ + + + + diff --git a/test/render/flex/-contain-layout-baseline-002.htm b/test/render/flex/-contain-layout-baseline-002.htm new file mode 100644 index 00000000..b4774a2f --- /dev/null +++ b/test/render/flex/-contain-layout-baseline-002.htm @@ -0,0 +1,39 @@ + + + + +CSS Containment Test: Layout containment supress baseline in flex items + + + + + + +

Test passes if there is a filled green square and no red.

+
+ +
item
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-contain-layout-suppress-baseline-002.htm b/test/render/flex/-contain-layout-suppress-baseline-002.htm new file mode 100644 index 00000000..7e3b5974 --- /dev/null +++ b/test/render/flex/-contain-layout-suppress-baseline-002.htm @@ -0,0 +1,75 @@ + + + + + + CSS Test: 'contain: layout' should make elements behave as if they have no baseline + + + + + + + +
+ + + + + + +
+ + +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-content-height-with-scrollbars.htm b/test/render/flex/-content-height-with-scrollbars.htm new file mode 100644 index 00000000..505d54a3 --- /dev/null +++ b/test/render/flex/-content-height-with-scrollbars.htm @@ -0,0 +1,47 @@ + +Ensure flexbox content-size excludes scrollbar. + + + + + + + +

This tests that when setting the height of a flex item to a percentage +height, we use the content height with scrollbars. The content should not be +scrollable in any of the test cases below.

+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-cross-axis-scrollbar.htm b/test/render/flex/-cross-axis-scrollbar.htm new file mode 100644 index 00000000..1c3ed5c8 --- /dev/null +++ b/test/render/flex/-cross-axis-scrollbar.htm @@ -0,0 +1,147 @@ + + + +CSS Flexbox: Scrollbars and flex-direction. + + + + + + + + +This test passes if no red is showing. + +
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+ + + + + + + diff --git a/test/render/flex/-css-box-justify-content.htm b/test/render/flex/-css-box-justify-content.htm new file mode 100644 index 00000000..5f0a96e6 --- /dev/null +++ b/test/render/flex/-css-box-justify-content.htm @@ -0,0 +1,34 @@ + +flexbox |css-box-justify-content + + + + + + +

This test passes if the DIV5's position in the end and the div is Horizontal layout

+
+
DIV1
+   +
DIV2
+   +
DIV3
+   +
DIV4
+   +
DIV5
+
+ \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-row-reverse-wrap-reverse.htm b/test/render/flex/-css-flexbox-row-reverse-wrap-reverse.htm new file mode 100644 index 00000000..ad22c18f --- /dev/null +++ b/test/render/flex/-css-flexbox-row-reverse-wrap-reverse.htm @@ -0,0 +1,47 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + + +

Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + +

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-row-reverse-wrap.htm b/test/render/flex/-css-flexbox-row-reverse-wrap.htm new file mode 100644 index 00000000..b486bc42 --- /dev/null +++ b/test/render/flex/-css-flexbox-row-reverse-wrap.htm @@ -0,0 +1,47 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + + +

Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + +

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-row-reverse.htm b/test/render/flex/-css-flexbox-row-reverse.htm new file mode 100644 index 00000000..9eb27654 --- /dev/null +++ b/test/render/flex/-css-flexbox-row-reverse.htm @@ -0,0 +1,56 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + + +

Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. +

+
+ +
+ +
+
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-row-wrap-reverse.htm b/test/render/flex/-css-flexbox-row-wrap-reverse.htm new file mode 100644 index 00000000..e0e2529e --- /dev/null +++ b/test/render/flex/-css-flexbox-row-wrap-reverse.htm @@ -0,0 +1,46 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + + +

Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. +

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-row-wrap.htm b/test/render/flex/-css-flexbox-row-wrap.htm new file mode 100644 index 00000000..f2c5a5d0 --- /dev/null +++ b/test/render/flex/-css-flexbox-row-wrap.htm @@ -0,0 +1,47 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + + +

Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. + +

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-row.htm b/test/render/flex/-css-flexbox-row.htm new file mode 100644 index 00000000..31903c84 --- /dev/null +++ b/test/render/flex/-css-flexbox-row.htm @@ -0,0 +1,56 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + + +

Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow. +

+
+ +
+ +
+
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-css-flexbox-test1.htm b/test/render/flex/-css-flexbox-test1.htm new file mode 100644 index 00000000..e5d20577 --- /dev/null +++ b/test/render/flex/-css-flexbox-test1.htm @@ -0,0 +1,54 @@ + + + + + + CSS Flexbox Test: flex direction: row, writing mode vertical + + + + + + + + + + + + +

The test passes if you see a tall green box with pairs of the digits 1-9 listed top to bottom in two columns.

+ +
+
+
１２３
１２３
+
４５６
４５６
+
７８９
７８９
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-direction-upright-002.htm b/test/render/flex/-direction-upright-002.htm new file mode 100644 index 00000000..2b5a232a --- /dev/null +++ b/test/render/flex/-direction-upright-002.htm @@ -0,0 +1,142 @@ + + + +'text-orientation: upright' forces used 'direction' to LTR in vertical typographic modes + + + + + + + + +

Test passes if both rows of boxes are identical (coloring, order, orientation, and arrangement of contents). + + + +

+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+ + + +
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+ +
+ + + +
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+ +
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+
+ + + +
ABC +
+
A B
+
A B
+
A Bb CcDd Ee
+
+ + \ No newline at end of file diff --git a/test/render/flex/-flex-002.htm b/test/render/flex/-flex-002.htm new file mode 100644 index 00000000..401e6cdf --- /dev/null +++ b/test/render/flex/-flex-002.htm @@ -0,0 +1,53 @@ + + + CSS Test: The 'flex' shorthand adjusting the 'flex-shrink' sub-property + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-003.htm b/test/render/flex/-flex-003.htm new file mode 100644 index 00000000..05f94264 --- /dev/null +++ b/test/render/flex/-flex-003.htm @@ -0,0 +1,54 @@ + + + CSS Test: Comparing two different elements using different values for the 'flex-grow' sub-property on the 'flex' shorthand + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-004.htm b/test/render/flex/-flex-004.htm new file mode 100644 index 00000000..61c59795 --- /dev/null +++ b/test/render/flex/-flex-004.htm @@ -0,0 +1,54 @@ + + + CSS Test: Comparing two different elements using different values for the 'flex-shrink' sub-property on the 'flex' shorthand + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-aspect-ratio-019.htm b/test/render/flex/-flex-aspect-ratio-019.htm new file mode 100644 index 00000000..e18be574 --- /dev/null +++ b/test/render/flex/-flex-aspect-ratio-019.htm @@ -0,0 +1,18 @@ + + + +CSS aspect-ratio: Row flexbox main size with flex-basis:content + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-aspect-ratio-020.htm b/test/render/flex/-flex-aspect-ratio-020.htm new file mode 100644 index 00000000..71022297 --- /dev/null +++ b/test/render/flex/-flex-aspect-ratio-020.htm @@ -0,0 +1,18 @@ + + + +CSS aspect-ratio: Flex item main size with flex-basis:content in Column flex container + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-aspect-ratio-021.htm b/test/render/flex/-flex-aspect-ratio-021.htm new file mode 100644 index 00000000..ba626ecd --- /dev/null +++ b/test/render/flex/-flex-aspect-ratio-021.htm @@ -0,0 +1,18 @@ + + + +CSS aspect-ratio: Flex item main size with flex-basis:content and width in Row flex container + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-aspect-ratio-022.htm b/test/render/flex/-flex-aspect-ratio-022.htm new file mode 100644 index 00000000..aff31c8c --- /dev/null +++ b/test/render/flex/-flex-aspect-ratio-022.htm @@ -0,0 +1,18 @@ + + + +CSS aspect-ratio: Column flexbox main size with flex-basis:content and height + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flex-direction-row-002-visual.htm b/test/render/flex/-flex-direction-row-002-visual.htm new file mode 100644 index 00000000..83c5969f --- /dev/null +++ b/test/render/flex/-flex-direction-row-002-visual.htm @@ -0,0 +1,45 @@ + + + + + CSS Test: flex-direction:row axis matches that of writing mode inline axis + + + + + + + + +

Test passes if both the lines below are identical.

+
+ ABC +
+
+ CBA +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flex-direction-row-vertical.htm b/test/render/flex/-flex-direction-row-vertical.htm new file mode 100644 index 00000000..c643f814 --- /dev/null +++ b/test/render/flex/-flex-direction-row-vertical.htm @@ -0,0 +1,51 @@ + + + + + CSS Test: flex-direction:row has the same orientation as inline axis + + + + + + + + + +

Test passes if both the two columns below are identical.

+
+
+ ABC +
+
+ CBA +
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flex-inline.htm b/test/render/flex/-flex-inline.htm new file mode 100644 index 00000000..45d22c8c --- /dev/null +++ b/test/render/flex/-flex-inline.htm @@ -0,0 +1,33 @@ + + + + + CSS Flexible Box Test: display proprety - inline-flex + + + + + + + +

The test passed if you see a green block which its text is 'Success!'.

+
+ +
Success!
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flex-minimum-height-flex-items-022.htm b/test/render/flex/-flex-minimum-height-flex-items-022.htm new file mode 100644 index 00000000..b685c305 --- /dev/null +++ b/test/render/flex/-flex-minimum-height-flex-items-022.htm @@ -0,0 +1,15 @@ + +Minimum height of a replaced element with borders + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+ +
+
+
+ \ No newline at end of file diff --git a/test/render/flex/-flex-minimum-width-flex-items-001.htm b/test/render/flex/-flex-minimum-width-flex-items-001.htm new file mode 100644 index 00000000..ed98e4c5 --- /dev/null +++ b/test/render/flex/-flex-minimum-width-flex-items-001.htm @@ -0,0 +1,44 @@ + + + + + + CSS Flexible Box Test: Minimum width of flex items + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
IT E
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flex-minimum-width-flex-items-003.htm b/test/render/flex/-flex-minimum-width-flex-items-003.htm new file mode 100644 index 00000000..3bac0f06 --- /dev/null +++ b/test/render/flex/-flex-minimum-width-flex-items-003.htm @@ -0,0 +1,45 @@ + + + + + + CSS Flexible Box Test: Minimum width of flex items + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
IT E
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flex-minimum-width-flex-items-009.htm b/test/render/flex/-flex-minimum-width-flex-items-009.htm new file mode 100644 index 00000000..4f2848ac --- /dev/null +++ b/test/render/flex/-flex-minimum-width-flex-items-009.htm @@ -0,0 +1,32 @@ + +CSS Flexible Box Test: Minimum width of flex items + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+ +
+ \ No newline at end of file diff --git a/test/render/flex/-flexbox-abspos-child-001b.htm b/test/render/flex/-flexbox-abspos-child-001b.htm new file mode 100644 index 00000000..80998abb --- /dev/null +++ b/test/render/flex/-flexbox-abspos-child-001b.htm @@ -0,0 +1,54 @@ + + + CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container + + + + + + + +
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-abspos-child-002.htm b/test/render/flex/-flexbox-abspos-child-002.htm new file mode 100644 index 00000000..43e833c5 --- /dev/null +++ b/test/render/flex/-flexbox-abspos-child-002.htm @@ -0,0 +1,61 @@ + + + + + CSS Test: Test that "flex-basis" doesn't affect layout of abspos flex child + + + + + + + + + + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-baseline-horiz-006.htm b/test/render/flex/-flexbox-align-self-baseline-horiz-006.htm new file mode 100644 index 00000000..464752f4 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-baseline-horiz-006.htm @@ -0,0 +1,56 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes. + + + + + + +
+
ortho
+
one line
+
two
lines
+
offset
+
+
+
ortho
+
one line
+
two
lines
+
offset
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-baseline-horiz-008.htm b/test/render/flex/-flexbox-align-self-baseline-horiz-008.htm new file mode 100644 index 00000000..0dc1cb1f --- /dev/null +++ b/test/render/flex/-flexbox-align-self-baseline-horiz-008.htm @@ -0,0 +1,57 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other. + + + + + + +
+
one line (first)
+
one line (last)
+
two
lines and offset (last)
+
offset (first)
+
+
+
one line (first)
+
one line (last)
+
two
lines and offset (last)
+
offset (first)
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-horiz-001-table.htm b/test/render/flex/-flexbox-align-self-horiz-001-table.htm new file mode 100644 index 00000000..6449e5c4 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-horiz-001-table.htm @@ -0,0 +1,101 @@ + + + + + + CSS Test: Testing the various 'align-self' property values on flex items that are tables + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
abc
+
stretch
+
a b c d e f
+
auto
+
unspec
+
initial
+
inherit
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-horiz-002.htm b/test/render/flex/-flexbox-align-self-horiz-002.htm new file mode 100644 index 00000000..647659d0 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-horiz-002.htm @@ -0,0 +1,100 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
+
+
+
base
+
abc
+
stretch
+
a b c d e f
+
+
+
+
self-start
+
a b c d e f
+
self-end
+
a b c d e f
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-vert-002.htm b/test/render/flex/-flexbox-align-self-vert-002.htm new file mode 100644 index 00000000..658b01b2 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-vert-002.htm @@ -0,0 +1,96 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
+
+
base
+
abc
+
stretch
+
a b c d e f
+
+
+
self-start
+
a b c d e f
+
self-end
+
a b c d e f
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-vert-rtl-001.htm b/test/render/flex/-flexbox-align-self-vert-rtl-001.htm new file mode 100644 index 00000000..25bbe197 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-vert-rtl-001.htm @@ -0,0 +1,97 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl' + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
abc
+
stretch
+
a b c d e f
+
auto
+
unspec
+
initial
+
inherit
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-vert-rtl-002.htm b/test/render/flex/-flexbox-align-self-vert-rtl-002.htm new file mode 100644 index 00000000..03ca3ef9 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-vert-rtl-002.htm @@ -0,0 +1,82 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl' + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
+
+
base
+
abc
+
stretch
+
a b c d e f
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-vert-rtl-003.htm b/test/render/flex/-flexbox-align-self-vert-rtl-003.htm new file mode 100644 index 00000000..69eea46e --- /dev/null +++ b/test/render/flex/-flexbox-align-self-vert-rtl-003.htm @@ -0,0 +1,72 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and with 'direction: rtl' + + + + + + +
+
start
+
a b
+
end
+
a b
+
center
+
a b
+
base
+
abc
+
stretch
+
a b
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-vert-rtl-004.htm b/test/render/flex/-flexbox-align-self-vert-rtl-004.htm new file mode 100644 index 00000000..b8c9566c --- /dev/null +++ b/test/render/flex/-flexbox-align-self-vert-rtl-004.htm @@ -0,0 +1,90 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl' + + + + + + + +
+
start
+
a b
+
stretch
+
a b
+
center
+
a b
+
+
+
base
+
abc
+
end
+
a b
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-align-self-vert-rtl-005.htm b/test/render/flex/-flexbox-align-self-vert-rtl-005.htm new file mode 100644 index 00000000..9d7600e9 --- /dev/null +++ b/test/render/flex/-flexbox-align-self-vert-rtl-005.htm @@ -0,0 +1,94 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction:rtl' + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
+
+
base
+
abc
+
stretch
+
a b c d e f
+
+
+
self-start
+
a b c d e f
+
self-end
+
a b c d e f
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-anonymous-items-001.htm b/test/render/flex/-flexbox-anonymous-items-001.htm new file mode 100644 index 00000000..b48a4553 --- /dev/null +++ b/test/render/flex/-flexbox-anonymous-items-001.htm @@ -0,0 +1,25 @@ + + + CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering + + + + + + + +
+ a a +
x x
+ b b +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-basic-block-horiz-001v.htm b/test/render/flex/-flexbox-basic-block-horiz-001v.htm new file mode 100644 index 00000000..09e29057 --- /dev/null +++ b/test/render/flex/-flexbox-basic-block-horiz-001v.htm @@ -0,0 +1,75 @@ + + + + + + + CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container + (with various writing-modes on the flex items). + + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-basic-block-vert-001v.htm b/test/render/flex/-flexbox-basic-block-vert-001v.htm new file mode 100644 index 00000000..bd3318a7 --- /dev/null +++ b/test/render/flex/-flexbox-basic-block-vert-001v.htm @@ -0,0 +1,77 @@ + + + + + + + CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container + (with various writing-modes on the flex items). + + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-collapsed-item-baseline-001.htm b/test/render/flex/-flexbox-collapsed-item-baseline-001.htm new file mode 100644 index 00000000..adedd02c --- /dev/null +++ b/test/render/flex/-flexbox-collapsed-item-baseline-001.htm @@ -0,0 +1,57 @@ + + + + + CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size + + + + + + + + +
+
a
+
b
+
+ + +
+
a
+
b
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-collapsed-item-horiz-001.htm b/test/render/flex/-flexbox-collapsed-item-horiz-001.htm new file mode 100644 index 00000000..6bc91e10 --- /dev/null +++ b/test/render/flex/-flexbox-collapsed-item-horiz-001.htm @@ -0,0 +1,101 @@ + + + + + CSS Test: Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout + + + + + + + + + +
+
+
+ +
+ + + +
+
+
+
+ +
+
+
+
+ +
+ + + +
+
+
+
+ +
+
+
+
+ +
+ + + +
+
+
+
+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-collapsed-item-horiz-002.htm b/test/render/flex/-flexbox-collapsed-item-horiz-002.htm new file mode 100644 index 00000000..74b24f5d --- /dev/null +++ b/test/render/flex/-flexbox-collapsed-item-horiz-002.htm @@ -0,0 +1,114 @@ + + + + + CSS Test: Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines + + + + + + + + + +
+
+
+
+
+ +
+
+
+
+
+ +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + +
+
+
+
+
+ +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-collapsed-item-horiz-003.htm b/test/render/flex/-flexbox-collapsed-item-horiz-003.htm new file mode 100644 index 00000000..b151b3e0 --- /dev/null +++ b/test/render/flex/-flexbox-collapsed-item-horiz-003.htm @@ -0,0 +1,59 @@ + + + + + CSS Test: Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched + + + + + + + + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-flex-basis-content-001a.htm b/test/render/flex/-flexbox-flex-basis-content-001a.htm new file mode 100644 index 00000000..ffb5c3ae --- /dev/null +++ b/test/render/flex/-flexbox-flex-basis-content-001a.htm @@ -0,0 +1,86 @@ + + + + + + CSS Test: Testing "flex-basis: content" in a row-oriented flex container + + + + + + + + + + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-flex-basis-content-001b.htm b/test/render/flex/-flexbox-flex-basis-content-001b.htm new file mode 100644 index 00000000..8b499293 --- /dev/null +++ b/test/render/flex/-flexbox-flex-basis-content-001b.htm @@ -0,0 +1,86 @@ + + + + + + CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand) + in a row-oriented flex container. + + + + + + + + + + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + + + + + diff --git a/test/render/flex/-flexbox-flex-basis-content-004b.htm b/test/render/flex/-flexbox-flex-basis-content-004b.htm new file mode 100644 index 00000000..38b35294 --- /dev/null +++ b/test/render/flex/-flexbox-flex-basis-content-004b.htm @@ -0,0 +1,131 @@ + + + + + + CSS Test: Testing that used "flex-basis: content" is treated as + "max-content" when calculating flex base size + + + + + + + + + + + +
+
+
+ + +
+
+ + + +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-flex-wrap-default.htm b/test/render/flex/-flexbox-flex-wrap-default.htm new file mode 100644 index 00000000..170481d0 --- /dev/null +++ b/test/render/flex/-flexbox-flex-wrap-default.htm @@ -0,0 +1,39 @@ + + + CSS Flexbox Test: Flex-wrap defaults to nowrap + + + + + + + + + +

The test passes if there is a green square and no red.

+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-flex-wrap-vert-001.htm b/test/render/flex/-flexbox-flex-wrap-vert-001.htm new file mode 100644 index 00000000..15a76cc7 --- /dev/null +++ b/test/render/flex/-flexbox-flex-wrap-vert-001.htm @@ -0,0 +1,98 @@ + + + CSS Test: Testing flex-wrap in vertical flex containers + + + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-flex-wrap-vert-002.htm b/test/render/flex/-flexbox-flex-wrap-vert-002.htm new file mode 100644 index 00000000..fcdcba04 --- /dev/null +++ b/test/render/flex/-flexbox-flex-wrap-vert-002.htm @@ -0,0 +1,60 @@ + + + CSS Test: Ensure that min-height is honored for vertical multi-line flex containers + + + + + + + + + +
+
+ + +
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-flex-wrap-wrap-reverse.htm b/test/render/flex/-flexbox-flex-wrap-wrap-reverse.htm new file mode 100644 index 00000000..2fa0c071 --- /dev/null +++ b/test/render/flex/-flexbox-flex-wrap-wrap-reverse.htm @@ -0,0 +1,60 @@ + + + + + CSS Flexbox Test: Flex-wrap = wrap-reverse + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
7
8
9
+
4
5
6
+
1
2
3
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-justify-content-wmvert-001.htm b/test/render/flex/-flexbox-justify-content-wmvert-001.htm new file mode 100644 index 00000000..85486134 --- /dev/null +++ b/test/render/flex/-flexbox-justify-content-wmvert-001.htm @@ -0,0 +1,144 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical writing mode flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-mbp-horiz-001-rtl-reverse.htm b/test/render/flex/-flexbox-mbp-horiz-001-rtl-reverse.htm new file mode 100644 index 00000000..70f6d61e --- /dev/null +++ b/test/render/flex/-flexbox-mbp-horiz-001-rtl-reverse.htm @@ -0,0 +1,75 @@ + + + + + + CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl' + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-mbp-horiz-001-rtl.htm b/test/render/flex/-flexbox-mbp-horiz-001-rtl.htm new file mode 100644 index 00000000..dbee82b2 --- /dev/null +++ b/test/render/flex/-flexbox-mbp-horiz-001-rtl.htm @@ -0,0 +1,73 @@ + + + + + + CSS Test: Testing borders on flex items in a horizontal flex container with 'direction: rtl' + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-mbp-horiz-002v.htm b/test/render/flex/-flexbox-mbp-horiz-002v.htm new file mode 100644 index 00000000..5e30e0e2 --- /dev/null +++ b/test/render/flex/-flexbox-mbp-horiz-002v.htm @@ -0,0 +1,87 @@ + + + + + + + CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container + (with a vertical writing-mode on the flex items). + + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-mbp-horiz-003v.htm b/test/render/flex/-flexbox-mbp-horiz-003v.htm new file mode 100644 index 00000000..48eeab28 --- /dev/null +++ b/test/render/flex/-flexbox-mbp-horiz-003v.htm @@ -0,0 +1,81 @@ + + + + + + + CSS Test: Testing borders and padding on a horizontal flex container and its flex items + (with a vertical writing-mode on the flex items). + + + + + + + +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-min-width-auto-002a.htm b/test/render/flex/-flexbox-min-width-auto-002a.htm new file mode 100644 index 00000000..0a23667d --- /dev/null +++ b/test/render/flex/-flexbox-min-width-auto-002a.htm @@ -0,0 +1,66 @@ + + + + CSS Test: Testing min-width:auto + + + + + + + + + + + +
+ blue square +
+ +
+ blue square +
+ +
+ blue square +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-min-width-auto-002b.htm b/test/render/flex/-flexbox-min-width-auto-002b.htm new file mode 100644 index 00000000..e6222704 --- /dev/null +++ b/test/render/flex/-flexbox-min-width-auto-002b.htm @@ -0,0 +1,66 @@ + + + + CSS Test: Testing min-width:auto + + + + + + + + + + + +
+ blue square +
+ +
+ blue square +
+ +
+ blue square +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-min-width-auto-002c.htm b/test/render/flex/-flexbox-min-width-auto-002c.htm new file mode 100644 index 00000000..1f19a017 --- /dev/null +++ b/test/render/flex/-flexbox-min-width-auto-002c.htm @@ -0,0 +1,68 @@ + + + + CSS Test: Testing min-width:auto + + + + + + + + + + + +
+ blue square +
+ +
+ blue square +
+ +
+ blue square +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-min-width-auto-005.htm b/test/render/flex/-flexbox-min-width-auto-005.htm new file mode 100644 index 00000000..f4321ab9 --- /dev/null +++ b/test/render/flex/-flexbox-min-width-auto-005.htm @@ -0,0 +1,38 @@ + +CSS Flexible Box Test: Aspect ratio handling of images + + + + + + + +

Test passes if there is no red visible on the page.

+ +
+
+ +
+ +
+ +
+
+
+ +
+
+ \ No newline at end of file diff --git a/test/render/flex/-flexbox-min-width-auto-006.htm b/test/render/flex/-flexbox-min-width-auto-006.htm new file mode 100644 index 00000000..66254378 --- /dev/null +++ b/test/render/flex/-flexbox-min-width-auto-006.htm @@ -0,0 +1,45 @@ + +CSS Flexible Box Test: Aspect ratio handling of images + + + + + + + +

Test passes if there are a (vertically centered) 20x20 and a 60x100 green boxes enclosed on each 100x100 square.

+ +
+
+ +
+
+ +
+ +
+
+ +
+
\ No newline at end of file diff --git a/test/render/flex/-flexbox-overflow-horiz-001.htm.htm b/test/render/flex/-flexbox-overflow-horiz-001.htm.htm new file mode 100644 index 00000000..291b337b --- /dev/null +++ b/test/render/flex/-flexbox-overflow-horiz-001.htm.htm @@ -0,0 +1,54 @@ + + + CSS Test: Testing 'overflow' property on a horizontal flex container, with contents not overflowing + + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-whitespace-handling-001a.htm b/test/render/flex/-flexbox-whitespace-handling-001a.htm new file mode 100644 index 00000000..f70b68dd --- /dev/null +++ b/test/render/flex/-flexbox-whitespace-handling-001a.htm @@ -0,0 +1,54 @@ + + + + CSS Test: Test that anonymous flex items aren't created for pure-whitespace inline content + + + + + + + +
+ + +
+ + +
+
+ + \ No newline at end of file diff --git a/test/render/flex/-flexbox-whitespace-handling-001b.htm b/test/render/flex/-flexbox-whitespace-handling-001b.htm new file mode 100644 index 00000000..59adb90b --- /dev/null +++ b/test/render/flex/-flexbox-whitespace-handling-001b.htm @@ -0,0 +1,42 @@ + + + + CSS Test: Test that flex items are created correctly + + + + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-001.htm b/test/render/flex/-flexbox-writing-mode-001.htm new file mode 100644 index 00000000..466b0b7f --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-001.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb' + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-002.htm b/test/render/flex/-flexbox-writing-mode-002.htm new file mode 100644 index 00000000..34b11ec0 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-002.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl' + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-003.htm b/test/render/flex/-flexbox-writing-mode-003.htm new file mode 100644 index 00000000..af3f20ad --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-003.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr' + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-004.htm b/test/render/flex/-flexbox-writing-mode-004.htm new file mode 100644 index 00000000..7332a2a6 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-004.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb' + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-005.htm b/test/render/flex/-flexbox-writing-mode-005.htm new file mode 100644 index 00000000..65ee1e3e --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-005.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl' + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-006.htm b/test/render/flex/-flexbox-writing-mode-006.htm new file mode 100644 index 00000000..0389a153 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-006.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr' + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-007.htm b/test/render/flex/-flexbox-writing-mode-007.htm new file mode 100644 index 00000000..11e44f20 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-007.htm @@ -0,0 +1,78 @@ + + + + + CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-008.htm b/test/render/flex/-flexbox-writing-mode-008.htm new file mode 100644 index 00000000..f32db5b0 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-008.htm @@ -0,0 +1,78 @@ + + + + + CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-009.htm b/test/render/flex/-flexbox-writing-mode-009.htm new file mode 100644 index 00000000..6145779d --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-009.htm @@ -0,0 +1,78 @@ + + + + + CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-010.htm b/test/render/flex/-flexbox-writing-mode-010.htm new file mode 100644 index 00000000..ca1f38d5 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-010.htm @@ -0,0 +1,87 @@ + + + + + + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a horizontal row-oriented flex container. + + + + + + + + + + + +
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-011.htm b/test/render/flex/-flexbox-writing-mode-011.htm new file mode 100644 index 00000000..971f54a2 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-011.htm @@ -0,0 +1,88 @@ + + + + + + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical row-oriented flex container. + + + + + + + + + + + +
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-012.htm b/test/render/flex/-flexbox-writing-mode-012.htm new file mode 100644 index 00000000..04878475 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-012.htm @@ -0,0 +1,89 @@ + + + + + + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical row-oriented flex container + with 'direction' flipped. + + + + + + + + + + + +
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-013.htm b/test/render/flex/-flexbox-writing-mode-013.htm new file mode 100644 index 00000000..b3b7f99d --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-013.htm @@ -0,0 +1,88 @@ + + + + + + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a horizontal column-oriented flex container. + + + + + + + + + + + +
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-014.htm b/test/render/flex/-flexbox-writing-mode-014.htm new file mode 100644 index 00000000..3a8755bf --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-014.htm @@ -0,0 +1,87 @@ + + + + + + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical column-oriented flex container. + + + + + + + + + + + +
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-015.htm b/test/render/flex/-flexbox-writing-mode-015.htm new file mode 100644 index 00000000..a01975a7 --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-015.htm @@ -0,0 +1,88 @@ + + + + + + CSS Test: Testing a mix of flex items with various values for + 'writing-mode' / 'direction' in a vertical column-oriented flex container + with 'direction' flipped. + + + + + + + + + + + +
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+
+ p b c + p e + p b c + p e + p b c + p e +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox-writing-mode-016.htm b/test/render/flex/-flexbox-writing-mode-016.htm new file mode 100644 index 00000000..afbcb55d --- /dev/null +++ b/test/render/flex/-flexbox-writing-mode-016.htm @@ -0,0 +1,147 @@ + + + + + + CSS Test: Testing auto-sized flex containers + with various 'writing-mode' values + and various padding amounts on flex items. + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_align-items-stretch-writing-modes.htm b/test/render/flex/-flexbox_align-items-stretch-writing-modes.htm new file mode 100644 index 00000000..dd019adb --- /dev/null +++ b/test/render/flex/-flexbox_align-items-stretch-writing-modes.htm @@ -0,0 +1,62 @@ + + + + + CSS Test: Flexbox align-items: stretch with writing-mode vertical-lr and vertical-rl + + + + + + + + + +

The test passes if you see a green rectangle and no red.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_block.htm b/test/render/flex/-flexbox_block.htm new file mode 100644 index 00000000..afa26b40 --- /dev/null +++ b/test/render/flex/-flexbox_block.htm @@ -0,0 +1,19 @@ + + + +flexbox | block + + + + + +
FAIL
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_columns-flexitems-2.htm b/test/render/flex/-flexbox_columns-flexitems-2.htm new file mode 100644 index 00000000..101188a7 --- /dev/null +++ b/test/render/flex/-flexbox_columns-flexitems-2.htm @@ -0,0 +1,32 @@ + +flexbox | multicol on flexbox items + + + + + + + +
+

+ one two three four five + one two three four five + one two three four five +

+
+ \ No newline at end of file diff --git a/test/render/flex/-flexbox_columns-flexitems.htm b/test/render/flex/-flexbox_columns-flexitems.htm new file mode 100644 index 00000000..22665e28 --- /dev/null +++ b/test/render/flex/-flexbox_columns-flexitems.htm @@ -0,0 +1,30 @@ + + + +flexbox | multicol on flexbox items + + + + + +
+

one two three four five

+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rowspan-overflow-automatic.htm b/test/render/flex/-flexbox_rowspan-overflow-automatic.htm new file mode 100644 index 00000000..6209c6a8 --- /dev/null +++ b/test/render/flex/-flexbox_rowspan-overflow-automatic.htm @@ -0,0 +1,69 @@ + + + +flexbox | flexcontainers in cells with rowspan + + + + + + + + + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+		 +
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rowspan-overflow.htm b/test/render/flex/-flexbox_rowspan-overflow.htm new file mode 100644 index 00000000..281ba4ec --- /dev/null +++ b/test/render/flex/-flexbox_rowspan-overflow.htm @@ -0,0 +1,68 @@ + + + +flexbox | flexcontainers in cells with rowspan + + + + + + + + + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+		 +
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rowspan.htm b/test/render/flex/-flexbox_rowspan.htm new file mode 100644 index 00000000..f99fd379 --- /dev/null +++ b/test/render/flex/-flexbox_rowspan.htm @@ -0,0 +1,68 @@ + + + +flexbox | flexcontainers in cells with rowspan + + + + + + + + + + + + + +
+
+

 

+

 

+

 

+

 

+

 

+
+		 +
+

 

+

 

+

 

+

 

+

 

+
+
+
+

 

+

 

+

 

+

 

+

 

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rtl-direction.htm b/test/render/flex/-flexbox_rtl-direction.htm new file mode 100644 index 00000000..91c501aa --- /dev/null +++ b/test/render/flex/-flexbox_rtl-direction.htm @@ -0,0 +1,38 @@ + + + +flexbox | flex-direction: column-reverse | rtl + + + + + + +
+ filler + filler + filler + filler +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rtl-flow-reverse.htm b/test/render/flex/-flexbox_rtl-flow-reverse.htm new file mode 100644 index 00000000..67828d5e --- /dev/null +++ b/test/render/flex/-flexbox_rtl-flow-reverse.htm @@ -0,0 +1,38 @@ + + + +flexbox | flex-flow: column wrap-reverse | rtl + + + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rtl-flow.htm b/test/render/flex/-flexbox_rtl-flow.htm new file mode 100644 index 00000000..d4d122e2 --- /dev/null +++ b/test/render/flex/-flexbox_rtl-flow.htm @@ -0,0 +1,38 @@ + + + +flexbox | flex-flow: column wrap | rtl + + + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_rtl-order.htm b/test/render/flex/-flexbox_rtl-order.htm new file mode 100644 index 00000000..c4581db2 --- /dev/null +++ b/test/render/flex/-flexbox_rtl-order.htm @@ -0,0 +1,57 @@ + + + +flexbox | flex-flow: column-reverse wrap-reverse; order | rtl + + + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/-flexbox_stf-table-singleline.htm b/test/render/flex/-flexbox_stf-table-singleline.htm new file mode 100644 index 00000000..8f5db709 --- /dev/null +++ b/test/render/flex/-flexbox_stf-table-singleline.htm @@ -0,0 +1,38 @@ + + + +flexbox | singleline flexcontainer versus stf :: table + + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + diff --git a/test/render/flex/-flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.htm b/test/render/flex/-flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.htm new file mode 100644 index 00000000..1b1fc849 --- /dev/null +++ b/test/render/flex/-flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.htm @@ -0,0 +1,64 @@ + + + + + + CSS Flexbox Test: Align content flex-start with writing mode vertical-rl. + + + + + + + +

The test passes if you see green and red top, blue and yellow bottom.

+ +
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-justify-content-001.htm b/test/render/flex/-justify-content-001.htm new file mode 100644 index 00000000..1115dc76 --- /dev/null +++ b/test/render/flex/-justify-content-001.htm @@ -0,0 +1,41 @@ + + + + + CSS Test: A flex container with 'justify-content' property set to 'center' + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-justify-content-002.htm b/test/render/flex/-justify-content-002.htm new file mode 100644 index 00000000..d6ff8aec --- /dev/null +++ b/test/render/flex/-justify-content-002.htm @@ -0,0 +1,38 @@ + + + + + CSS Test: A flex container with the 'justify-content' property set to 'flex-start' + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-justify-content-003.htm b/test/render/flex/-justify-content-003.htm new file mode 100644 index 00000000..b1a83a9e --- /dev/null +++ b/test/render/flex/-justify-content-003.htm @@ -0,0 +1,37 @@ + + + + + CSS Test: A flex container with the 'justify-content' property set to 'flex-end' + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-justify-content-004.htm b/test/render/flex/-justify-content-004.htm new file mode 100644 index 00000000..fcab4fbe --- /dev/null +++ b/test/render/flex/-justify-content-004.htm @@ -0,0 +1,41 @@ + + + + + CSS Test: A flex container with the 'justify-content' property set to 'space-between' + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-justify-content-005.htm b/test/render/flex/-justify-content-005.htm new file mode 100644 index 00000000..f9748dfb --- /dev/null +++ b/test/render/flex/-justify-content-005.htm @@ -0,0 +1,41 @@ + + + + + CSS Test: A flex container with the 'justify-content' property set to 'space-around' + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/-negative-flex-margins-crash.htm b/test/render/flex/-negative-flex-margins-crash.htm new file mode 100644 index 00000000..c6cdcfe6 --- /dev/null +++ b/test/render/flex/-negative-flex-margins-crash.htm @@ -0,0 +1,26 @@ + + + +CSS Flexbox: Crash caused by negative width in flex box + + + + + + +
+
+
PASS if we don't assert
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-nested-orthogonal-flexbox-relayout.htm b/test/render/flex/-nested-orthogonal-flexbox-relayout.htm new file mode 100644 index 00000000..fb5f085a --- /dev/null +++ b/test/render/flex/-nested-orthogonal-flexbox-relayout.htm @@ -0,0 +1,34 @@ + +CSS Flexbox: nested orthogonal children on relayout. + + + + + +
+
+
This text should not overflow its box
+
+
+ + \ No newline at end of file diff --git a/test/render/flex/-percentage-size-subitems-001.htm b/test/render/flex/-percentage-size-subitems-001.htm new file mode 100644 index 00000000..3d610b9b --- /dev/null +++ b/test/render/flex/-percentage-size-subitems-001.htm @@ -0,0 +1,98 @@ + + + + +CSS Flexbox Test: Percentage size on child of a flex item with margin, border, padding and scrollbar + + + + + + +

The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.

+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-fixed-min-width-3.htm b/test/render/flex/-table-as-item-fixed-min-width-3.htm new file mode 100644 index 00000000..2dc259d7 --- /dev/null +++ b/test/render/flex/-table-as-item-fixed-min-width-3.htm @@ -0,0 +1,25 @@ + + + +table is flex item + + + + + + +

Test passes if there is a filled green square and no red.

+ + + +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-flex-cross-size.htm b/test/render/flex/-table-as-item-flex-cross-size.htm new file mode 100644 index 00000000..12118e14 --- /dev/null +++ b/test/render/flex/-table-as-item-flex-cross-size.htm @@ -0,0 +1,17 @@ + + + + + + +

Test passes if there is a filled green square and no red.

+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-inflexible-in-column-1.htm b/test/render/flex/-table-as-item-inflexible-in-column-1.htm new file mode 100644 index 00000000..c525aa0e --- /dev/null +++ b/test/render/flex/-table-as-item-inflexible-in-column-1.htm @@ -0,0 +1,19 @@ + + + +Table as a flex item in column-oriented flex container + + + + + + + + +

Test passes if there is a filled green square.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-inflexible-in-column-2.htm b/test/render/flex/-table-as-item-inflexible-in-column-2.htm new file mode 100644 index 00000000..97f0caaa --- /dev/null +++ b/test/render/flex/-table-as-item-inflexible-in-column-2.htm @@ -0,0 +1,22 @@ + + + +Table as a flex item in column-oriented flex container + + + + + + + + +

Test passes if there is a filled green square.

+
+ + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-inflexible-in-row-1.htm b/test/render/flex/-table-as-item-inflexible-in-row-1.htm new file mode 100644 index 00000000..b1b7574f --- /dev/null +++ b/test/render/flex/-table-as-item-inflexible-in-row-1.htm @@ -0,0 +1,19 @@ + + + +Table as a flex item in row-oriented flex container + + + + + + + + +

Test passes if there is a filled green square.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-inflexible-in-row-2.htm b/test/render/flex/-table-as-item-inflexible-in-row-2.htm new file mode 100644 index 00000000..a4e391d0 --- /dev/null +++ b/test/render/flex/-table-as-item-inflexible-in-row-2.htm @@ -0,0 +1,22 @@ + + + +Table as a flex item in row-oriented flex container + + + + + + + + +

Test passes if there is a filled green square.

+
+ + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-narrow-content-2.htm b/test/render/flex/-table-as-item-narrow-content-2.htm new file mode 100644 index 00000000..c6ec7402 --- /dev/null +++ b/test/render/flex/-table-as-item-narrow-content-2.htm @@ -0,0 +1,19 @@ + + + +CSS Flexbox Test: Flex item as table with narrow content + + + + + +

Test passes if there is a filled green square.

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-percent-width-cell-001.htm b/test/render/flex/-table-as-item-percent-width-cell-001.htm new file mode 100644 index 00000000..434aebe5 --- /dev/null +++ b/test/render/flex/-table-as-item-percent-width-cell-001.htm @@ -0,0 +1,41 @@ + + + + +Flexbox Test: display:table flex items with percent-width cells and content keywords for used flex-basis + + + + + + +
+ +
12
+
+
+
12
+
+
+
12
+
+
+
12
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-specified-height.htm b/test/render/flex/-table-as-item-specified-height.htm new file mode 100644 index 00000000..d90ed789 --- /dev/null +++ b/test/render/flex/-table-as-item-specified-height.htm @@ -0,0 +1,20 @@ + + + +table is flex item + + + + + + + + +

Test passes if there is a filled green square.

+ +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-specified-width.htm b/test/render/flex/-table-as-item-specified-width.htm new file mode 100644 index 00000000..df4b62c2 --- /dev/null +++ b/test/render/flex/-table-as-item-specified-width.htm @@ -0,0 +1,21 @@ + + + +table is flex item + + + + + + +

Test passes if there is a filled green square.

+ + + +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-stretch-cross-size-2.htm b/test/render/flex/-table-as-item-stretch-cross-size-2.htm new file mode 100644 index 00000000..303ae80e --- /dev/null +++ b/test/render/flex/-table-as-item-stretch-cross-size-2.htm @@ -0,0 +1,18 @@ + + + + + + + +

Test passes if there is a filled green square and no red.

+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-stretch-cross-size-5.htm b/test/render/flex/-table-as-item-stretch-cross-size-5.htm new file mode 100644 index 00000000..e153a332 --- /dev/null +++ b/test/render/flex/-table-as-item-stretch-cross-size-5.htm @@ -0,0 +1,43 @@ + + + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/-table-as-item-stretch-cross-size.htm b/test/render/flex/-table-as-item-stretch-cross-size.htm new file mode 100644 index 00000000..af582df4 --- /dev/null +++ b/test/render/flex/-table-as-item-stretch-cross-size.htm @@ -0,0 +1,17 @@ + + + + + + +

Test passes if there is a filled green square and no red.

+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-htb-ltr.htm b/test/render/flex/abspos-autopos-htb-ltr.htm new file mode 100644 index 00000000..bdfbe2cf --- /dev/null +++ b/test/render/flex/abspos-autopos-htb-ltr.htm @@ -0,0 +1,39 @@ + + + +Absolutely positioned child with auto position in vertical-rl ltr flexbox + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-htb-ltr.htm.png b/test/render/flex/abspos-autopos-htb-ltr.htm.png new file mode 100644 index 00000000..21d20656 Binary files /dev/null and b/test/render/flex/abspos-autopos-htb-ltr.htm.png differ diff --git a/test/render/flex/abspos-autopos-htb-rtl.htm b/test/render/flex/abspos-autopos-htb-rtl.htm new file mode 100644 index 00000000..f3a5af1c --- /dev/null +++ b/test/render/flex/abspos-autopos-htb-rtl.htm @@ -0,0 +1,39 @@ + + + +Absolutely positioned child with auto position in vertical-rl ltr flexbox + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-htb-rtl.htm.png b/test/render/flex/abspos-autopos-htb-rtl.htm.png new file mode 100644 index 00000000..21d20656 Binary files /dev/null and b/test/render/flex/abspos-autopos-htb-rtl.htm.png differ diff --git a/test/render/flex/abspos-autopos-vlr-ltr.htm b/test/render/flex/abspos-autopos-vlr-ltr.htm new file mode 100644 index 00000000..bcb71d97 --- /dev/null +++ b/test/render/flex/abspos-autopos-vlr-ltr.htm @@ -0,0 +1,39 @@ + + + +Absolutely positioned child with auto position in vertical-rl ltr flexbox + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-vlr-ltr.htm.png b/test/render/flex/abspos-autopos-vlr-ltr.htm.png new file mode 100644 index 00000000..21d20656 Binary files /dev/null and b/test/render/flex/abspos-autopos-vlr-ltr.htm.png differ diff --git a/test/render/flex/abspos-autopos-vlr-rtl.htm b/test/render/flex/abspos-autopos-vlr-rtl.htm new file mode 100644 index 00000000..b369dad9 --- /dev/null +++ b/test/render/flex/abspos-autopos-vlr-rtl.htm @@ -0,0 +1,39 @@ + + + +Absolutely positioned child with auto position in vertical-rl ltr flexbox + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-vlr-rtl.htm.png b/test/render/flex/abspos-autopos-vlr-rtl.htm.png new file mode 100644 index 00000000..21d20656 Binary files /dev/null and b/test/render/flex/abspos-autopos-vlr-rtl.htm.png differ diff --git a/test/render/flex/abspos-autopos-vrl-ltr.htm b/test/render/flex/abspos-autopos-vrl-ltr.htm new file mode 100644 index 00000000..8987cea5 --- /dev/null +++ b/test/render/flex/abspos-autopos-vrl-ltr.htm @@ -0,0 +1,39 @@ + + + +Absolutely positioned child with auto position in vertical-rl ltr flexbox + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-vrl-ltr.htm.png b/test/render/flex/abspos-autopos-vrl-ltr.htm.png new file mode 100644 index 00000000..21d20656 Binary files /dev/null and b/test/render/flex/abspos-autopos-vrl-ltr.htm.png differ diff --git a/test/render/flex/abspos-autopos-vrl-rtl.htm b/test/render/flex/abspos-autopos-vrl-rtl.htm new file mode 100644 index 00000000..cb46539d --- /dev/null +++ b/test/render/flex/abspos-autopos-vrl-rtl.htm @@ -0,0 +1,39 @@ + + + +Absolutely positioned child with auto position in vertical-rl ltr flexbox + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/abspos-autopos-vrl-rtl.htm.png b/test/render/flex/abspos-autopos-vrl-rtl.htm.png new file mode 100644 index 00000000..21d20656 Binary files /dev/null and b/test/render/flex/abspos-autopos-vrl-rtl.htm.png differ diff --git a/test/render/flex/align-baseline.htm b/test/render/flex/align-baseline.htm new file mode 100644 index 00000000..85db4d71 --- /dev/null +++ b/test/render/flex/align-baseline.htm @@ -0,0 +1,30 @@ + + + + + + + + + + + +
+

This text

+

should be left aligned.

+
+ +
+

This text

+

should be right aligned.

+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/align-baseline.htm.png b/test/render/flex/align-baseline.htm.png new file mode 100644 index 00000000..360c0ad1 Binary files /dev/null and b/test/render/flex/align-baseline.htm.png differ diff --git a/test/render/flex/align-content-006.htm b/test/render/flex/align-content-006.htm new file mode 100644 index 00000000..81e27966 --- /dev/null +++ b/test/render/flex/align-content-006.htm @@ -0,0 +1,40 @@ + + + + + CSS Test: A multi-line flex container with the 'align-content' property set to 'stretch' + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/align-content-006.htm.png b/test/render/flex/align-content-006.htm.png new file mode 100644 index 00000000..b5d9e991 Binary files /dev/null and b/test/render/flex/align-content-006.htm.png differ diff --git a/test/render/flex/align-content_center.htm b/test/render/flex/align-content_center.htm new file mode 100644 index 00000000..8bf9ba67 --- /dev/null +++ b/test/render/flex/align-content_center.htm @@ -0,0 +1,31 @@ + + + + + CSS Flexible Box Test: align-content_center + + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in middle left of red rectangle.

+
1
2
3
+ + + + + diff --git a/test/render/flex/align-content_center.htm.png b/test/render/flex/align-content_center.htm.png new file mode 100644 index 00000000..e278bf45 Binary files /dev/null and b/test/render/flex/align-content_center.htm.png differ diff --git a/test/render/flex/align-content_flex-end.htm b/test/render/flex/align-content_flex-end.htm new file mode 100644 index 00000000..4b55b24e --- /dev/null +++ b/test/render/flex/align-content_flex-end.htm @@ -0,0 +1,31 @@ + + + + + CSS Flexible Box Test: align-content_flex-end + + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in bottom left of red rectangle.

+
1
2
3
+ + + + + diff --git a/test/render/flex/align-content_flex-end.htm.png b/test/render/flex/align-content_flex-end.htm.png new file mode 100644 index 00000000..4da94059 Binary files /dev/null and b/test/render/flex/align-content_flex-end.htm.png differ diff --git a/test/render/flex/align-content_flex-start.htm b/test/render/flex/align-content_flex-start.htm new file mode 100644 index 00000000..eaf4ff0c --- /dev/null +++ b/test/render/flex/align-content_flex-start.htm @@ -0,0 +1,32 @@ + + + + + CSS Flexible Box Test: align-content_flex-start + + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in upper left of red rectangle.

+
+
1
2
3
+ + + + + diff --git a/test/render/flex/align-content_flex-start.htm.png b/test/render/flex/align-content_flex-start.htm.png new file mode 100644 index 00000000..f0368ef0 Binary files /dev/null and b/test/render/flex/align-content_flex-start.htm.png differ diff --git a/test/render/flex/align-content_space-around.htm b/test/render/flex/align-content_space-around.htm new file mode 100644 index 00000000..ece853a5 --- /dev/null +++ b/test/render/flex/align-content_space-around.htm @@ -0,0 +1,31 @@ + + + + + CSS Flexible Box Test: align-content_space-around + + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.
+ 2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the column before the first and after the last rectangle are half the size of the other empty spaces.

+
1
2
3
+ + + + + diff --git a/test/render/flex/align-content_space-around.htm.png b/test/render/flex/align-content_space-around.htm.png new file mode 100644 index 00000000..704ecfef Binary files /dev/null and b/test/render/flex/align-content_space-around.htm.png differ diff --git a/test/render/flex/align-content_space-between.htm b/test/render/flex/align-content_space-between.htm new file mode 100644 index 00000000..da23b9ee --- /dev/null +++ b/test/render/flex/align-content_space-between.htm @@ -0,0 +1,31 @@ + + + + + CSS Flexible Box Test: align-content_space-between + + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.
+ 2. No gap between the top of red rectangle and the top of rectangle 1, no gap between the bottom of red rectangle and the bottom of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.

+
1
2
3
+ + + + + diff --git a/test/render/flex/align-content_space-between.htm.png b/test/render/flex/align-content_space-between.htm.png new file mode 100644 index 00000000..c1b91341 Binary files /dev/null and b/test/render/flex/align-content_space-between.htm.png differ diff --git a/test/render/flex/align-content_stretch.htm b/test/render/flex/align-content_stretch.htm new file mode 100644 index 00000000..c7380ab4 --- /dev/null +++ b/test/render/flex/align-content_stretch.htm @@ -0,0 +1,31 @@ + + + + + CSS Flexible Box Test: align-content_stretch + + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle.
+ 2. No gap between the top of red rectangle and the top of rectangle 1, and rectangle 1 , 2, 3 are distributed so that the empty space in the column between 1 , 2 , 3 is the same. +

1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/align-content_stretch.htm.png b/test/render/flex/align-content_stretch.htm.png new file mode 100644 index 00000000..d8487e45 Binary files /dev/null and b/test/render/flex/align-content_stretch.htm.png differ diff --git a/test/render/flex/align-items-004.htm.png b/test/render/flex/align-items-004.htm.png new file mode 100644 index 00000000..b5d9e991 Binary files /dev/null and b/test/render/flex/align-items-004.htm.png differ diff --git a/test/render/flex/align-items-005.htm b/test/render/flex/align-items-005.htm new file mode 100644 index 00000000..75524b9a --- /dev/null +++ b/test/render/flex/align-items-005.htm @@ -0,0 +1,39 @@ + + + + + CSS Test: A flex container with the 'align-items' property set to 'stretch' + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/align-items-005.htm.png b/test/render/flex/align-items-005.htm.png new file mode 100644 index 00000000..b5d9e991 Binary files /dev/null and b/test/render/flex/align-items-005.htm.png differ diff --git a/test/render/flex/align-items-006.htm b/test/render/flex/align-items-006.htm new file mode 100644 index 00000000..7dd0bb8b --- /dev/null +++ b/test/render/flex/align-items-006.htm @@ -0,0 +1,42 @@ + + + + + CSS Test: A flex container with 'column' direction and 'align-items' property set to 'flex-start' + + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+
XXXX
+
+ + + + + diff --git a/test/render/flex/align-items-006.htm.png b/test/render/flex/align-items-006.htm.png new file mode 100644 index 00000000..b5d9e991 Binary files /dev/null and b/test/render/flex/align-items-006.htm.png differ diff --git a/test/render/flex/align-self-001.htm b/test/render/flex/align-self-001.htm new file mode 100644 index 00000000..00f3a63e --- /dev/null +++ b/test/render/flex/align-self-001.htm @@ -0,0 +1,45 @@ + + + + +CSS Flexbox Test: align-self - flex-start + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-001.htm.png b/test/render/flex/align-self-001.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-001.htm.png differ diff --git a/test/render/flex/align-self-002.htm b/test/render/flex/align-self-002.htm new file mode 100644 index 00000000..1b7fca20 --- /dev/null +++ b/test/render/flex/align-self-002.htm @@ -0,0 +1,45 @@ + + + + +CSS Flexbox Test: align-self - flex-end + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-002.htm.png b/test/render/flex/align-self-002.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-002.htm.png differ diff --git a/test/render/flex/align-self-003.htm b/test/render/flex/align-self-003.htm new file mode 100644 index 00000000..b984225a --- /dev/null +++ b/test/render/flex/align-self-003.htm @@ -0,0 +1,52 @@ + + + + +CSS Flexbox Test: align-self - center + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-003.htm.png b/test/render/flex/align-self-003.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-003.htm.png differ diff --git a/test/render/flex/align-self-004.htm b/test/render/flex/align-self-004.htm new file mode 100644 index 00000000..a4bde718 --- /dev/null +++ b/test/render/flex/align-self-004.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: align-self - stretch + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-004.htm.png b/test/render/flex/align-self-004.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-004.htm.png differ diff --git a/test/render/flex/align-self-005.htm b/test/render/flex/align-self-005.htm new file mode 100644 index 00000000..c2624e08 --- /dev/null +++ b/test/render/flex/align-self-005.htm @@ -0,0 +1,46 @@ + + + + +CSS Flexbox Test: align-self - stretch (height: number) + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-005.htm.png b/test/render/flex/align-self-005.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-005.htm.png differ diff --git a/test/render/flex/align-self-006.htm b/test/render/flex/align-self-006.htm new file mode 100644 index 00000000..43904888 --- /dev/null +++ b/test/render/flex/align-self-006.htm @@ -0,0 +1,52 @@ + + + + +CSS Flexbox Test: align-self - baseline + + + + + + + + +

Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.

+
+ + + + +
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-006.htm.png b/test/render/flex/align-self-006.htm.png new file mode 100644 index 00000000..e877c360 Binary files /dev/null and b/test/render/flex/align-self-006.htm.png differ diff --git a/test/render/flex/align-self-007.htm b/test/render/flex/align-self-007.htm new file mode 100644 index 00000000..01cd936d --- /dev/null +++ b/test/render/flex/align-self-007.htm @@ -0,0 +1,47 @@ + + + + +CSS Flexbox Test: align-self - auto and align-items - flex-start + + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-007.htm.png b/test/render/flex/align-self-007.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-007.htm.png differ diff --git a/test/render/flex/align-self-008.htm b/test/render/flex/align-self-008.htm new file mode 100644 index 00000000..c9e25efb --- /dev/null +++ b/test/render/flex/align-self-008.htm @@ -0,0 +1,46 @@ + + + + +CSS Flexbox Test: align-self - auto and align-items - flex-end + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-008.htm.png b/test/render/flex/align-self-008.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-008.htm.png differ diff --git a/test/render/flex/align-self-009.htm b/test/render/flex/align-self-009.htm new file mode 100644 index 00000000..10e3fed2 --- /dev/null +++ b/test/render/flex/align-self-009.htm @@ -0,0 +1,53 @@ + + + + +CSS Flexbox Test: align-self - auto and align-items - center + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-009.htm.png b/test/render/flex/align-self-009.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-009.htm.png differ diff --git a/test/render/flex/align-self-010.htm b/test/render/flex/align-self-010.htm new file mode 100644 index 00000000..e134f85e --- /dev/null +++ b/test/render/flex/align-self-010.htm @@ -0,0 +1,53 @@ + + + + +CSS Flexbox Test: align-self - auto and align-items - baseline + + + + + + + + +

Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.

+
+ + + + +
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-010.htm.png b/test/render/flex/align-self-010.htm.png new file mode 100644 index 00000000..e877c360 Binary files /dev/null and b/test/render/flex/align-self-010.htm.png differ diff --git a/test/render/flex/align-self-011.htm b/test/render/flex/align-self-011.htm new file mode 100644 index 00000000..bf639246 --- /dev/null +++ b/test/render/flex/align-self-011.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: align-self - auto and align-items - stretch + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-011.htm.png b/test/render/flex/align-self-011.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-011.htm.png differ diff --git a/test/render/flex/align-self-012.htm b/test/render/flex/align-self-012.htm new file mode 100644 index 00000000..373c09cb --- /dev/null +++ b/test/render/flex/align-self-012.htm @@ -0,0 +1,40 @@ + + + + +CSS Flexbox Test: align-self - auto (initial value) + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-012.htm.png b/test/render/flex/align-self-012.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-012.htm.png differ diff --git a/test/render/flex/align-self-013.htm b/test/render/flex/align-self-013.htm new file mode 100644 index 00000000..1933336b --- /dev/null +++ b/test/render/flex/align-self-013.htm @@ -0,0 +1,46 @@ + + + + +CSS Flexbox Test: align-self - invalid if applied to flex container + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/align-self-013.htm.png b/test/render/flex/align-self-013.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/align-self-013.htm.png differ diff --git a/test/render/flex/anonymous-block.htm b/test/render/flex/anonymous-block.htm new file mode 100644 index 00000000..006c609c --- /dev/null +++ b/test/render/flex/anonymous-block.htm @@ -0,0 +1,17 @@ + + + +CSS Flexbox: anonymous block + + + + + +

This tests that text nodes that have a flexbox as a parent are wrapped in +anonymous blocks.

+
This text should be visible.
+ + + + + diff --git a/test/render/flex/anonymous-block.htm.png b/test/render/flex/anonymous-block.htm.png new file mode 100644 index 00000000..a004783c Binary files /dev/null and b/test/render/flex/anonymous-block.htm.png differ diff --git a/test/render/flex/auto-height-column-with-border-and-padding.htm b/test/render/flex/auto-height-column-with-border-and-padding.htm new file mode 100644 index 00000000..826ded44 --- /dev/null +++ b/test/render/flex/auto-height-column-with-border-and-padding.htm @@ -0,0 +1,17 @@ + + + +CSS Flexbox: auto-height with border and padding + + + + +Tests that auto-height column flexboxes with border and padding correctly size their height to their content. +
+
+
+
+
+
+ + diff --git a/test/render/flex/auto-height-column-with-border-and-padding.htm.png b/test/render/flex/auto-height-column-with-border-and-padding.htm.png new file mode 100644 index 00000000..d06e4fa6 Binary files /dev/null and b/test/render/flex/auto-height-column-with-border-and-padding.htm.png differ diff --git a/test/render/flex/auto-height-with-flex.htm b/test/render/flex/auto-height-with-flex.htm new file mode 100644 index 00000000..d2cf5903 --- /dev/null +++ b/test/render/flex/auto-height-with-flex.htm @@ -0,0 +1,14 @@ + + + + + + +
+
Header
+
Flexible content
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/auto-height-with-flex.htm.png b/test/render/flex/auto-height-with-flex.htm.png new file mode 100644 index 00000000..5f7be4df Binary files /dev/null and b/test/render/flex/auto-height-with-flex.htm.png differ diff --git a/test/render/flex/contain-layout-baseline-002.htm.png b/test/render/flex/contain-layout-baseline-002.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/contain-layout-baseline-002.htm.png differ diff --git a/test/render/flex/css-box-justify-content.htm b/test/render/flex/css-box-justify-content.htm new file mode 100644 index 00000000..4325e926 --- /dev/null +++ b/test/render/flex/css-box-justify-content.htm @@ -0,0 +1,38 @@ + + + +flexbox |css-box-justify-content + + + + + + +

This test passes if the DIV5's position in the end and the div is Horizontal layout

+
+
DIV1
+   +
DIV2
+   +
DIV3
+   +
DIV4
+   +
DIV5
+
+ + + \ No newline at end of file diff --git a/test/render/flex/css-box-justify-content.htm.png b/test/render/flex/css-box-justify-content.htm.png new file mode 100644 index 00000000..12d5e1e6 Binary files /dev/null and b/test/render/flex/css-box-justify-content.htm.png differ diff --git a/test/render/flex/display-flex-001.htm b/test/render/flex/display-flex-001.htm new file mode 100644 index 00000000..06bdbcd9 --- /dev/null +++ b/test/render/flex/display-flex-001.htm @@ -0,0 +1,36 @@ + + + + + CSS Test: An element with the 'display' property set to 'flex' establishes a new block-level flex container + + + + + + + + +

Test passes if there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/display-flex-001.htm.png b/test/render/flex/display-flex-001.htm.png new file mode 100644 index 00000000..b5d9e991 Binary files /dev/null and b/test/render/flex/display-flex-001.htm.png differ diff --git a/test/render/flex/flex-001.htm b/test/render/flex/flex-001.htm new file mode 100644 index 00000000..a605fc14 --- /dev/null +++ b/test/render/flex/flex-001.htm @@ -0,0 +1,40 @@ + + + + + CSS Test: The 'flex' shorthand adjusting the 'flex-grow' sub-property + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-001.htm.png b/test/render/flex/flex-001.htm.png new file mode 100644 index 00000000..156126b1 Binary files /dev/null and b/test/render/flex/flex-001.htm.png differ diff --git a/test/render/flex/flex-002.htm b/test/render/flex/flex-002.htm new file mode 100644 index 00000000..dd5406c0 --- /dev/null +++ b/test/render/flex/flex-002.htm @@ -0,0 +1,57 @@ + + + + + CSS Test: The 'flex' shorthand adjusting the 'flex-shrink' sub-property + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-002.htm.png b/test/render/flex/flex-002.htm.png new file mode 100644 index 00000000..156126b1 Binary files /dev/null and b/test/render/flex/flex-002.htm.png differ diff --git a/test/render/flex/flex-003.htm b/test/render/flex/flex-003.htm new file mode 100644 index 00000000..7a31f350 --- /dev/null +++ b/test/render/flex/flex-003.htm @@ -0,0 +1,58 @@ + + + + + CSS Test: Comparing two different elements using different values for the 'flex-grow' sub-property on the 'flex' shorthand + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-003.htm.png b/test/render/flex/flex-003.htm.png new file mode 100644 index 00000000..156126b1 Binary files /dev/null and b/test/render/flex/flex-003.htm.png differ diff --git a/test/render/flex/flex-004.htm b/test/render/flex/flex-004.htm new file mode 100644 index 00000000..a190d70f --- /dev/null +++ b/test/render/flex/flex-004.htm @@ -0,0 +1,58 @@ + + + + + CSS Test: Comparing two different elements using different values for the 'flex-shrink' sub-property on the 'flex' shorthand + + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-004.htm.png b/test/render/flex/flex-004.htm.png new file mode 100644 index 00000000..156126b1 Binary files /dev/null and b/test/render/flex/flex-004.htm.png differ diff --git a/test/render/flex/flex-align-content-center.htm b/test/render/flex/flex-align-content-center.htm new file mode 100644 index 00000000..53aad11a --- /dev/null +++ b/test/render/flex/flex-align-content-center.htm @@ -0,0 +1,45 @@ + + + + + CSS Flexible Box Test: align-content property - center + + + + + + + +

The test passed if you see a centered 2*2 table.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-align-content-center.htm.png b/test/render/flex/flex-align-content-center.htm.png new file mode 100644 index 00000000..8e3aa9a6 Binary files /dev/null and b/test/render/flex/flex-align-content-center.htm.png differ diff --git a/test/render/flex/flex-align-content-end.htm b/test/render/flex/flex-align-content-end.htm new file mode 100644 index 00000000..a01e6f06 --- /dev/null +++ b/test/render/flex/flex-align-content-end.htm @@ -0,0 +1,45 @@ + + + + + CSS Flexible Box Test: align-content property - flex-end + + + + + + + +

The test passed if you see a 2*2 table and all the cells are at the bottom of container.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-align-content-end.htm.png b/test/render/flex/flex-align-content-end.htm.png new file mode 100644 index 00000000..6d023c54 Binary files /dev/null and b/test/render/flex/flex-align-content-end.htm.png differ diff --git a/test/render/flex/flex-align-content-space-around.htm b/test/render/flex/flex-align-content-space-around.htm new file mode 100644 index 00000000..542fa5cb --- /dev/null +++ b/test/render/flex/flex-align-content-space-around.htm @@ -0,0 +1,45 @@ + + + + + CSS Flexible Box Test: align-content property - space-around + + + + + + + +

The test passed if you see a 2*2 table and all the cells are at the bottom of container.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-align-content-space-around.htm.png b/test/render/flex/flex-align-content-space-around.htm.png new file mode 100644 index 00000000..f0d2c297 Binary files /dev/null and b/test/render/flex/flex-align-content-space-around.htm.png differ diff --git a/test/render/flex/flex-align-content-space-between.htm b/test/render/flex/flex-align-content-space-between.htm new file mode 100644 index 00000000..eff222a3 --- /dev/null +++ b/test/render/flex/flex-align-content-space-between.htm @@ -0,0 +1,45 @@ + + + + + CSS Flexible Box Test: align-content property - space-between + + + + + + + +

The test passed if you see a 2*2 table and all the cells are spaced equally apart.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-align-content-space-between.htm.png b/test/render/flex/flex-align-content-space-between.htm.png new file mode 100644 index 00000000..cca50c4b Binary files /dev/null and b/test/render/flex/flex-align-content-space-between.htm.png differ diff --git a/test/render/flex/flex-align-content-start.htm b/test/render/flex/flex-align-content-start.htm new file mode 100644 index 00000000..4df16c45 --- /dev/null +++ b/test/render/flex/flex-align-content-start.htm @@ -0,0 +1,45 @@ + + + + + CSS Flexible Box Test: align-content property - flex-start + + + + + + + +

The test passed if you see a 2*2 table and all the cells are at the top of the container.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-align-content-start.htm.png b/test/render/flex/flex-align-content-start.htm.png new file mode 100644 index 00000000..43f61cfd Binary files /dev/null and b/test/render/flex/flex-align-content-start.htm.png differ diff --git a/test/render/flex/flex-base.htm b/test/render/flex/flex-base.htm new file mode 100644 index 00000000..2819dd25 --- /dev/null +++ b/test/render/flex/flex-base.htm @@ -0,0 +1,35 @@ + + + + + CSS Flexible Box Test: display proprety - flex + + + + + + + +

The test passed if you can't find red color.

+
+ Hello +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-base.htm.png b/test/render/flex/flex-base.htm.png new file mode 100644 index 00000000..cb278f1f Binary files /dev/null and b/test/render/flex/flex-base.htm.png differ diff --git a/test/render/flex/flex-basis-001.htm b/test/render/flex/flex-basis-001.htm new file mode 100644 index 00000000..d04b2328 --- /dev/null +++ b/test/render/flex/flex-basis-001.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: flex-basis - positive number + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-001.htm.png b/test/render/flex/flex-basis-001.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-001.htm.png differ diff --git a/test/render/flex/flex-basis-002.htm b/test/render/flex/flex-basis-002.htm new file mode 100644 index 00000000..b12a8305 --- /dev/null +++ b/test/render/flex/flex-basis-002.htm @@ -0,0 +1,47 @@ + + + + +CSS Flexbox Test: flex-basis - positive number + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-002.htm.png b/test/render/flex/flex-basis-002.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-002.htm.png differ diff --git a/test/render/flex/flex-basis-003.htm b/test/render/flex/flex-basis-003.htm new file mode 100644 index 00000000..7a2ba7a7 --- /dev/null +++ b/test/render/flex/flex-basis-003.htm @@ -0,0 +1,47 @@ + + + + +CSS Flexbox Test: flex-basis - negative number(width not specified) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-003.htm.png b/test/render/flex/flex-basis-003.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-003.htm.png differ diff --git a/test/render/flex/flex-basis-004.htm b/test/render/flex/flex-basis-004.htm new file mode 100644 index 00000000..af773c2f --- /dev/null +++ b/test/render/flex/flex-basis-004.htm @@ -0,0 +1,49 @@ + + + + +CSS Flexbox Test: flex-basis - negative number(width specified) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-004.htm.png b/test/render/flex/flex-basis-004.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-004.htm.png differ diff --git a/test/render/flex/flex-basis-005.htm b/test/render/flex/flex-basis-005.htm new file mode 100644 index 00000000..35e05089 --- /dev/null +++ b/test/render/flex/flex-basis-005.htm @@ -0,0 +1,34 @@ + + + + +CSS Flexbox Test: flex-basis - 0 + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-005.htm.png b/test/render/flex/flex-basis-005.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-005.htm.png differ diff --git a/test/render/flex/flex-basis-006.htm b/test/render/flex/flex-basis-006.htm new file mode 100644 index 00000000..3c8de53f --- /dev/null +++ b/test/render/flex/flex-basis-006.htm @@ -0,0 +1,34 @@ + + + + +CSS Flexbox Test: flex-basis - 0% + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-006.htm.png b/test/render/flex/flex-basis-006.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-006.htm.png differ diff --git a/test/render/flex/flex-basis-007.htm b/test/render/flex/flex-basis-007.htm new file mode 100644 index 00000000..ea338797 --- /dev/null +++ b/test/render/flex/flex-basis-007.htm @@ -0,0 +1,40 @@ + + + + +CSS Flexbox Test: flex-basis - auto + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-007.htm.png b/test/render/flex/flex-basis-007.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-007.htm.png differ diff --git a/test/render/flex/flex-basis-008.htm b/test/render/flex/flex-basis-008.htm new file mode 100644 index 00000000..d85669a9 --- /dev/null +++ b/test/render/flex/flex-basis-008.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: flex-basis - 50% + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-008.htm.png b/test/render/flex/flex-basis-008.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-008.htm.png differ diff --git a/test/render/flex/flex-basis-010.htm b/test/render/flex/flex-basis-010.htm new file mode 100644 index 00000000..ba82b33a --- /dev/null +++ b/test/render/flex/flex-basis-010.htm @@ -0,0 +1,36 @@ + + + + +CSS Flexbox Test: Indefinite % flex-basis should cause height to be ignored + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-basis-010.htm.png b/test/render/flex/flex-basis-010.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-basis-010.htm.png differ diff --git a/test/render/flex/flex-basis-011.htm b/test/render/flex/flex-basis-011.htm new file mode 100644 index 00000000..d7e98c2a --- /dev/null +++ b/test/render/flex/flex-basis-011.htm @@ -0,0 +1,30 @@ + + + + +CSS Flexbox Test: % flex-basis should not cause engines to treat items as percentage sized + + + + + + +

Test PASS if there are two boxes with blue borders vertically stretched to fit their contents.

+
+
+
+
AAA
+
+
+
BBB
+
+
+
+ + + diff --git a/test/render/flex/flex-basis-011.htm.png b/test/render/flex/flex-basis-011.htm.png new file mode 100644 index 00000000..618758e9 Binary files /dev/null and b/test/render/flex/flex-basis-011.htm.png differ diff --git a/test/render/flex/flex-box-wrap.htm b/test/render/flex/flex-box-wrap.htm new file mode 100644 index 00000000..17305b23 --- /dev/null +++ b/test/render/flex/flex-box-wrap.htm @@ -0,0 +1,51 @@ + + + + + CSS Flexbox Test: flex-wrap: wrap + + + + + + + + +

There should be a green block with no red.

+ +
    +
  • width: 120px
    • +
  • width: 120px
    • +
  • +
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flex-box-wrap.htm.png b/test/render/flex/flex-box-wrap.htm.png new file mode 100644 index 00000000..c40d31f8 Binary files /dev/null and b/test/render/flex/flex-box-wrap.htm.png differ diff --git a/test/render/flex/flex-container-margin.htm b/test/render/flex/flex-container-margin.htm new file mode 100644 index 00000000..0c43b2db --- /dev/null +++ b/test/render/flex/flex-container-margin.htm @@ -0,0 +1,34 @@ + + + + +CSS Test: flex-container-margin-not-collapse-with-content-margin + + + + + + + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-container-margin.htm.png b/test/render/flex/flex-container-margin.htm.png new file mode 100644 index 00000000..c05913f9 Binary files /dev/null and b/test/render/flex/flex-container-margin.htm.png differ diff --git a/test/render/flex/flex-direction-column-001-visual.htm b/test/render/flex/flex-direction-column-001-visual.htm new file mode 100644 index 00000000..fdbfd84b --- /dev/null +++ b/test/render/flex/flex-direction-column-001-visual.htm @@ -0,0 +1,29 @@ + + + + + CSS Flexible Box Test: flex-direction_column + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.
+ 2. They are all appear in upper left of the red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-column-001-visual.htm.png b/test/render/flex/flex-direction-column-001-visual.htm.png new file mode 100644 index 00000000..0cc9c620 Binary files /dev/null and b/test/render/flex/flex-direction-column-001-visual.htm.png differ diff --git a/test/render/flex/flex-direction-column-reverse-001-visual.htm b/test/render/flex/flex-direction-column-reverse-001-visual.htm new file mode 100644 index 00000000..2d77d666 --- /dev/null +++ b/test/render/flex/flex-direction-column-reverse-001-visual.htm @@ -0,0 +1,29 @@ + + + + + CSS Flexible Box Test: flex-direction_column-reverse + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a vertical column in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in bottom left of red rectangle and from top to bottom of the column: 3, 2, 1.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-column-reverse-001-visual.htm.png b/test/render/flex/flex-direction-column-reverse-001-visual.htm.png new file mode 100644 index 00000000..0790dcc7 Binary files /dev/null and b/test/render/flex/flex-direction-column-reverse-001-visual.htm.png differ diff --git a/test/render/flex/flex-direction-column-reverse-002-visual.htm b/test/render/flex/flex-direction-column-reverse-002-visual.htm new file mode 100644 index 00000000..09ce44c4 --- /dev/null +++ b/test/render/flex/flex-direction-column-reverse-002-visual.htm @@ -0,0 +1,43 @@ + + + + + CSS Test: flex-direction: column-reverse swaps main start and end directions + + + + + + + + +

Test passes if both the two columns below are identical.

+
+ ABC +
+
+ CBA +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-column-reverse-002-visual.htm.png b/test/render/flex/flex-direction-column-reverse-002-visual.htm.png new file mode 100644 index 00000000..5ce25dfe Binary files /dev/null and b/test/render/flex/flex-direction-column-reverse-002-visual.htm.png differ diff --git a/test/render/flex/flex-direction-column-reverse.htm b/test/render/flex/flex-direction-column-reverse.htm new file mode 100644 index 00000000..a251d1c5 --- /dev/null +++ b/test/render/flex/flex-direction-column-reverse.htm @@ -0,0 +1,42 @@ + + + + + CSS Flexible Box Test: flex-direction proprety - column-reverse + + + + + + + +

The test passed if you see all the cells are arraged vertically and reversed.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-column-reverse.htm.png b/test/render/flex/flex-direction-column-reverse.htm.png new file mode 100644 index 00000000..c6f43f23 Binary files /dev/null and b/test/render/flex/flex-direction-column-reverse.htm.png differ diff --git a/test/render/flex/flex-direction-column.htm b/test/render/flex/flex-direction-column.htm new file mode 100644 index 00000000..fb108514 --- /dev/null +++ b/test/render/flex/flex-direction-column.htm @@ -0,0 +1,42 @@ + + + + + CSS Flexible Box Test: flex-direction proprety - column + + + + + + + +

The test passed if you see all the cells are arraged vertically.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-column.htm.png b/test/render/flex/flex-direction-column.htm.png new file mode 100644 index 00000000..ed9a5315 Binary files /dev/null and b/test/render/flex/flex-direction-column.htm.png differ diff --git a/test/render/flex/flex-direction-row-001-visual.htm b/test/render/flex/flex-direction-row-001-visual.htm new file mode 100644 index 00000000..9347b13c --- /dev/null +++ b/test/render/flex/flex-direction-row-001-visual.htm @@ -0,0 +1,29 @@ + + + + + CSS Flexible Box Test: flex-direction_row + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in upper left of red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-row-001-visual.htm.png b/test/render/flex/flex-direction-row-001-visual.htm.png new file mode 100644 index 00000000..a1cd1762 Binary files /dev/null and b/test/render/flex/flex-direction-row-001-visual.htm.png differ diff --git a/test/render/flex/flex-direction-row-reverse-001-visual.htm b/test/render/flex/flex-direction-row-reverse-001-visual.htm new file mode 100644 index 00000000..da02934a --- /dev/null +++ b/test/render/flex/flex-direction-row-reverse-001-visual.htm @@ -0,0 +1,29 @@ + + + + + CSS Flexible Box Test: flex-direction_row-reverse + + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in upper right of red rectangle and from left to right of the row: 3, 2, 1.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-row-reverse-001-visual.htm.png b/test/render/flex/flex-direction-row-reverse-001-visual.htm.png new file mode 100644 index 00000000..d60d2682 Binary files /dev/null and b/test/render/flex/flex-direction-row-reverse-001-visual.htm.png differ diff --git a/test/render/flex/flex-direction-row-reverse-002-visual.htm b/test/render/flex/flex-direction-row-reverse-002-visual.htm new file mode 100644 index 00000000..222b3983 --- /dev/null +++ b/test/render/flex/flex-direction-row-reverse-002-visual.htm @@ -0,0 +1,42 @@ + + + + + CSS Test: flow-direction:row-reverse swaps main start and end directions + + + + + + + + +

Test passes if both the lines below are identical.

+
+ ABC +
+
+ CBA +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-row-reverse-002-visual.htm.png b/test/render/flex/flex-direction-row-reverse-002-visual.htm.png new file mode 100644 index 00000000..301ee0d4 Binary files /dev/null and b/test/render/flex/flex-direction-row-reverse-002-visual.htm.png differ diff --git a/test/render/flex/flex-direction-row-reverse.htm b/test/render/flex/flex-direction-row-reverse.htm new file mode 100644 index 00000000..9f3e8b9f --- /dev/null +++ b/test/render/flex/flex-direction-row-reverse.htm @@ -0,0 +1,40 @@ + + + + + CSS Flexible Box Test: flex-direction proprety - row-reverse + + + + + + + +

The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.

+
+ first + second + third + forth +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction-row-reverse.htm.png b/test/render/flex/flex-direction-row-reverse.htm.png new file mode 100644 index 00000000..a066389b Binary files /dev/null and b/test/render/flex/flex-direction-row-reverse.htm.png differ diff --git a/test/render/flex/flex-direction.htm b/test/render/flex/flex-direction.htm new file mode 100644 index 00000000..f6917401 --- /dev/null +++ b/test/render/flex/flex-direction.htm @@ -0,0 +1,58 @@ + + + + +CSS Test: flex flow direction + + + + + + + +

flex-direction:row

+
1
2
3
+ +

flex-direction:row-reverse

+
1
2
3
+ +

flex-direction:column

+
1
2
3
+ +

flex-direction:column-reverse

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-direction.htm.png b/test/render/flex/flex-direction.htm.png new file mode 100644 index 00000000..b5bdb27a Binary files /dev/null and b/test/render/flex/flex-direction.htm.png differ diff --git a/test/render/flex/flex-flexitem-childmargin.htm b/test/render/flex/flex-flexitem-childmargin.htm new file mode 100644 index 00000000..5a7b361b --- /dev/null +++ b/test/render/flex/flex-flexitem-childmargin.htm @@ -0,0 +1,52 @@ + + + + + flex item child margin + + + + + + + + +
+
+

+ a +

+
+
+

+ b +

+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flex-flexitem-childmargin.htm.png b/test/render/flex/flex-flexitem-childmargin.htm.png new file mode 100644 index 00000000..a356877c Binary files /dev/null and b/test/render/flex/flex-flexitem-childmargin.htm.png differ diff --git a/test/render/flex/flex-flexitem-percentage-prescation.htm b/test/render/flex/flex-flexitem-percentage-prescation.htm new file mode 100644 index 00000000..32881e10 --- /dev/null +++ b/test/render/flex/flex-flexitem-percentage-prescation.htm @@ -0,0 +1,37 @@ + + + + + flex item size prescation + + + + + + + + +
+

d

+

d

+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flex-flexitem-percentage-prescation.htm.png b/test/render/flex/flex-flexitem-percentage-prescation.htm.png new file mode 100644 index 00000000..4b61e2a8 Binary files /dev/null and b/test/render/flex/flex-flexitem-percentage-prescation.htm.png differ diff --git a/test/render/flex/flex-flow-001.htm b/test/render/flex/flex-flow-001.htm new file mode 100644 index 00000000..909e04b6 --- /dev/null +++ b/test/render/flex/flex-flow-001.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: flex-flow - row nowrap + + + + + + + + + + +

Test passes if there is a filled green rectangle whose width is greater than height + and the number within rectangle is '1 2 3 4' from left to right.

+
+
1
+
2
+
3
+
4
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-001.htm.png b/test/render/flex/flex-flow-001.htm.png new file mode 100644 index 00000000..90610329 Binary files /dev/null and b/test/render/flex/flex-flow-001.htm.png differ diff --git a/test/render/flex/flex-flow-002.htm b/test/render/flex/flex-flow-002.htm new file mode 100644 index 00000000..2eb58310 --- /dev/null +++ b/test/render/flex/flex-flow-002.htm @@ -0,0 +1,40 @@ + + + + +CSS Flexbox Test: flex-flow - row wrap + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
1
+
2
+
3
+
4
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-002.htm.png b/test/render/flex/flex-flow-002.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-002.htm.png differ diff --git a/test/render/flex/flex-flow-003.htm b/test/render/flex/flex-flow-003.htm new file mode 100644 index 00000000..7a9066a0 --- /dev/null +++ b/test/render/flex/flex-flow-003.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - row wrap-reverse + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
3
+
4
+
1
+
2
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-003.htm.png b/test/render/flex/flex-flow-003.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-003.htm.png differ diff --git a/test/render/flex/flex-flow-004.htm b/test/render/flex/flex-flow-004.htm new file mode 100644 index 00000000..de591976 --- /dev/null +++ b/test/render/flex/flex-flow-004.htm @@ -0,0 +1,40 @@ + + + + +CSS Flexbox Test: flex-flow - row-reverse nowrap + + + + + + + + + + +

Test passes if there is a filled green rectangle whose width is greater than height + and the number within rectangle is '1 2 3 4' from left to right.

+
+
4
+
3
+
2
+
1
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-004.htm.png b/test/render/flex/flex-flow-004.htm.png new file mode 100644 index 00000000..90610329 Binary files /dev/null and b/test/render/flex/flex-flow-004.htm.png differ diff --git a/test/render/flex/flex-flow-005.htm b/test/render/flex/flex-flow-005.htm new file mode 100644 index 00000000..51f6c6f1 --- /dev/null +++ b/test/render/flex/flex-flow-005.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - row-reverse wrap + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
2
+
1
+
4
+
3
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-005.htm.png b/test/render/flex/flex-flow-005.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-005.htm.png differ diff --git a/test/render/flex/flex-flow-006.htm b/test/render/flex/flex-flow-006.htm new file mode 100644 index 00000000..8ecbb976 --- /dev/null +++ b/test/render/flex/flex-flow-006.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - row-reverse wrap-reverse + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
4
+
3
+
2
+
1
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-006.htm.png b/test/render/flex/flex-flow-006.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-006.htm.png differ diff --git a/test/render/flex/flex-flow-007.htm b/test/render/flex/flex-flow-007.htm new file mode 100644 index 00000000..55487def --- /dev/null +++ b/test/render/flex/flex-flow-007.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: flex-flow - column nowrap + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.

+
+
1
+
2
+
3
+
4
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-007.htm.png b/test/render/flex/flex-flow-007.htm.png new file mode 100644 index 00000000..0b9ed1f4 Binary files /dev/null and b/test/render/flex/flex-flow-007.htm.png differ diff --git a/test/render/flex/flex-flow-008.htm b/test/render/flex/flex-flow-008.htm new file mode 100644 index 00000000..c1e8c7db --- /dev/null +++ b/test/render/flex/flex-flow-008.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - column wrap + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
1
+
3
+
2
+
4
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-008.htm.png b/test/render/flex/flex-flow-008.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-008.htm.png differ diff --git a/test/render/flex/flex-flow-009.htm b/test/render/flex/flex-flow-009.htm new file mode 100644 index 00000000..5aa71c01 --- /dev/null +++ b/test/render/flex/flex-flow-009.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - column wrap-reverse + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
2
+
4
+
1
+
3
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-009.htm.png b/test/render/flex/flex-flow-009.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-009.htm.png differ diff --git a/test/render/flex/flex-flow-010.htm b/test/render/flex/flex-flow-010.htm new file mode 100644 index 00000000..3d46f868 --- /dev/null +++ b/test/render/flex/flex-flow-010.htm @@ -0,0 +1,39 @@ + + + + +CSS Flexbox Test: flex-flow - column-reverse nowrap + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.

+
+
4
+
3
+
2
+
1
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-010.htm.png b/test/render/flex/flex-flow-010.htm.png new file mode 100644 index 00000000..0b9ed1f4 Binary files /dev/null and b/test/render/flex/flex-flow-010.htm.png differ diff --git a/test/render/flex/flex-flow-011.htm b/test/render/flex/flex-flow-011.htm new file mode 100644 index 00000000..d8491c9f --- /dev/null +++ b/test/render/flex/flex-flow-011.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - column-reverse wrap + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
3
+
1
+
4
+
2
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-011.htm.png b/test/render/flex/flex-flow-011.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-011.htm.png differ diff --git a/test/render/flex/flex-flow-012.htm b/test/render/flex/flex-flow-012.htm new file mode 100644 index 00000000..412310a4 --- /dev/null +++ b/test/render/flex/flex-flow-012.htm @@ -0,0 +1,41 @@ + + + + +CSS Flexbox Test: flex-flow - column-reverse wrap-reverse + + + + + + + + + + +

Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' + from left to right, top to bottom.

+
+
4
+
2
+
3
+
1
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-flow-012.htm.png b/test/render/flex/flex-flow-012.htm.png new file mode 100644 index 00000000..dd3f391c Binary files /dev/null and b/test/render/flex/flex-flow-012.htm.png differ diff --git a/test/render/flex/flex-grow-001.htm b/test/render/flex/flex-grow-001.htm new file mode 100644 index 00000000..37013daa --- /dev/null +++ b/test/render/flex/flex-grow-001.htm @@ -0,0 +1,46 @@ + + + + + + CSS Test: Flex-grow Property of Block-level Flex Items + + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-001.htm.png b/test/render/flex/flex-grow-001.htm.png new file mode 100644 index 00000000..03d0ab88 Binary files /dev/null and b/test/render/flex/flex-grow-001.htm.png differ diff --git a/test/render/flex/flex-grow-002.htm b/test/render/flex/flex-grow-002.htm new file mode 100644 index 00000000..a5ebea4b --- /dev/null +++ b/test/render/flex/flex-grow-002.htm @@ -0,0 +1,50 @@ + + + + +CSS Flexbox Test: flex-grow - 0(initial value) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-002.htm.png b/test/render/flex/flex-grow-002.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-grow-002.htm.png differ diff --git a/test/render/flex/flex-grow-003.htm b/test/render/flex/flex-grow-003.htm new file mode 100644 index 00000000..aabafd87 --- /dev/null +++ b/test/render/flex/flex-grow-003.htm @@ -0,0 +1,49 @@ + + + + +CSS Flexbox Test: flex-grow - negative number + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-003.htm.png b/test/render/flex/flex-grow-003.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-grow-003.htm.png differ diff --git a/test/render/flex/flex-grow-004.htm b/test/render/flex/flex-grow-004.htm new file mode 100644 index 00000000..5784a26d --- /dev/null +++ b/test/render/flex/flex-grow-004.htm @@ -0,0 +1,49 @@ + + + + +CSS Flexbox Test: flex-grow - (invalid when no space distributed) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-004.htm.png b/test/render/flex/flex-grow-004.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-grow-004.htm.png differ diff --git a/test/render/flex/flex-grow-005.htm b/test/render/flex/flex-grow-005.htm new file mode 100644 index 00000000..dc22e780 --- /dev/null +++ b/test/render/flex/flex-grow-005.htm @@ -0,0 +1,43 @@ + + + + +CSS Flexbox Test: flex-grow - (invalid when applied to flex container) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-005.htm.png b/test/render/flex/flex-grow-005.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-grow-005.htm.png differ diff --git a/test/render/flex/flex-grow-006.htm b/test/render/flex/flex-grow-006.htm new file mode 100644 index 00000000..df9eb069 --- /dev/null +++ b/test/render/flex/flex-grow-006.htm @@ -0,0 +1,42 @@ + + + + +CSS Flexbox Test: flex-grow - positive number(fill all space) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-006.htm.png b/test/render/flex/flex-grow-006.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-grow-006.htm.png differ diff --git a/test/render/flex/flex-grow-007.htm b/test/render/flex/flex-grow-007.htm new file mode 100644 index 00000000..43cbed69 --- /dev/null +++ b/test/render/flex/flex-grow-007.htm @@ -0,0 +1,49 @@ + + + + +CSS Flexbox Test: flex-grow - less than one + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-grow-007.htm.png b/test/render/flex/flex-grow-007.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-grow-007.htm.png differ diff --git a/test/render/flex/flex-margin-no-collapse.htm b/test/render/flex/flex-margin-no-collapse.htm new file mode 100644 index 00000000..93e204bd --- /dev/null +++ b/test/render/flex/flex-margin-no-collapse.htm @@ -0,0 +1,58 @@ + + + + + CSS Flexible Box Test: flex item margins + + + + + + + + +

The test passes if there are two green boxes and no red.

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flex-margin-no-collapse.htm.png b/test/render/flex/flex-margin-no-collapse.htm.png new file mode 100644 index 00000000..7748b717 Binary files /dev/null and b/test/render/flex/flex-margin-no-collapse.htm.png differ diff --git a/test/render/flex/flex-minimum-height-flex-items-001.htm b/test/render/flex/flex-minimum-height-flex-items-001.htm new file mode 100644 index 00000000..bce73166 --- /dev/null +++ b/test/render/flex/flex-minimum-height-flex-items-001.htm @@ -0,0 +1,52 @@ + + + + + + CSS Flexible Box Test: Minimum height of flex items + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-minimum-height-flex-items-001.htm.png b/test/render/flex/flex-minimum-height-flex-items-001.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-minimum-height-flex-items-001.htm.png differ diff --git a/test/render/flex/flex-minimum-height-flex-items-002.htm b/test/render/flex/flex-minimum-height-flex-items-002.htm new file mode 100644 index 00000000..cc8bfe16 --- /dev/null +++ b/test/render/flex/flex-minimum-height-flex-items-002.htm @@ -0,0 +1,50 @@ + + + + + + CSS Flexible Box Test: Minimum height of flex items + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-minimum-height-flex-items-002.htm.png b/test/render/flex/flex-minimum-height-flex-items-002.htm.png new file mode 100644 index 00000000..6b9fa9aa Binary files /dev/null and b/test/render/flex/flex-minimum-height-flex-items-002.htm.png differ diff --git a/test/render/flex/flex-minimum-height-flex-items-011.htm b/test/render/flex/flex-minimum-height-flex-items-011.htm new file mode 100644 index 00000000..6591a43f --- /dev/null +++ b/test/render/flex/flex-minimum-height-flex-items-011.htm @@ -0,0 +1,54 @@ + + + + + + CSS Flexible Box Test: Minimum height of flex items + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-minimum-height-flex-items-011.htm.png b/test/render/flex/flex-minimum-height-flex-items-011.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-minimum-height-flex-items-011.htm.png differ diff --git a/test/render/flex/flex-minimum-width-flex-items-002.htm b/test/render/flex/flex-minimum-width-flex-items-002.htm new file mode 100644 index 00000000..e4e2abec --- /dev/null +++ b/test/render/flex/flex-minimum-width-flex-items-002.htm @@ -0,0 +1,48 @@ + + + + + + CSS Flexible Box Test: Minimum width of flex items + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-minimum-width-flex-items-002.htm.png b/test/render/flex/flex-minimum-width-flex-items-002.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-minimum-width-flex-items-002.htm.png differ diff --git a/test/render/flex/flex-order.htm b/test/render/flex/flex-order.htm new file mode 100644 index 00000000..023c949f --- /dev/null +++ b/test/render/flex/flex-order.htm @@ -0,0 +1,40 @@ + + + + + CSS Test: flex order + + + + + + + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-order.htm.png b/test/render/flex/flex-order.htm.png new file mode 100644 index 00000000..ea4d0fc2 Binary files /dev/null and b/test/render/flex/flex-order.htm.png differ diff --git a/test/render/flex/flex-shrink-001.htm b/test/render/flex/flex-shrink-001.htm new file mode 100644 index 00000000..1e675532 --- /dev/null +++ b/test/render/flex/flex-shrink-001.htm @@ -0,0 +1,47 @@ + + + + +CSS Flexbox Test: flex-shrink - number(positive) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-001.htm.png b/test/render/flex/flex-shrink-001.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-001.htm.png differ diff --git a/test/render/flex/flex-shrink-002.htm b/test/render/flex/flex-shrink-002.htm new file mode 100644 index 00000000..8975611a --- /dev/null +++ b/test/render/flex/flex-shrink-002.htm @@ -0,0 +1,47 @@ + + + + +CSS Flexbox Test: flex-shrink - number(negative) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-002.htm.png b/test/render/flex/flex-shrink-002.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-002.htm.png differ diff --git a/test/render/flex/flex-shrink-003.htm b/test/render/flex/flex-shrink-003.htm new file mode 100644 index 00000000..a211308b --- /dev/null +++ b/test/render/flex/flex-shrink-003.htm @@ -0,0 +1,44 @@ + + + + +CSS Flexbox Test: flex-shrink - 1(initial value) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-003.htm.png b/test/render/flex/flex-shrink-003.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-003.htm.png differ diff --git a/test/render/flex/flex-shrink-004.htm b/test/render/flex/flex-shrink-004.htm new file mode 100644 index 00000000..4773c03d --- /dev/null +++ b/test/render/flex/flex-shrink-004.htm @@ -0,0 +1,48 @@ + + + + +CSS Flexbox Test: flex-shrink - number(flex container has enough space) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-004.htm.png b/test/render/flex/flex-shrink-004.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-004.htm.png differ diff --git a/test/render/flex/flex-shrink-005.htm b/test/render/flex/flex-shrink-005.htm new file mode 100644 index 00000000..7f12d4b2 --- /dev/null +++ b/test/render/flex/flex-shrink-005.htm @@ -0,0 +1,47 @@ + + + + +CSS Flexbox Test: flex-shrink - 0 + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-005.htm.png b/test/render/flex/flex-shrink-005.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-005.htm.png differ diff --git a/test/render/flex/flex-shrink-006.htm b/test/render/flex/flex-shrink-006.htm new file mode 100644 index 00000000..488ecd12 --- /dev/null +++ b/test/render/flex/flex-shrink-006.htm @@ -0,0 +1,51 @@ + + + + +CSS Flexbox Test: flex-shrink - 0(one of flex-shrinks sets 0, another not) + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-006.htm.png b/test/render/flex/flex-shrink-006.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-006.htm.png differ diff --git a/test/render/flex/flex-shrink-007.htm b/test/render/flex/flex-shrink-007.htm new file mode 100644 index 00000000..4f9b0463 --- /dev/null +++ b/test/render/flex/flex-shrink-007.htm @@ -0,0 +1,44 @@ + + + + +CSS Flexbox Test: flex-shrink - applied to flex container + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-007.htm.png b/test/render/flex/flex-shrink-007.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-007.htm.png differ diff --git a/test/render/flex/flex-shrink-008.htm b/test/render/flex/flex-shrink-008.htm new file mode 100644 index 00000000..ec2bf7ec --- /dev/null +++ b/test/render/flex/flex-shrink-008.htm @@ -0,0 +1,49 @@ + + + + +CSS Flexbox Test: flex-shrink - less than one + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flex-shrink-008.htm.png b/test/render/flex/flex-shrink-008.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/flex-shrink-008.htm.png differ diff --git a/test/render/flex/flexbox-abspos-child-001a.htm.png b/test/render/flex/flexbox-abspos-child-001a.htm.png new file mode 100644 index 00000000..31c053b0 Binary files /dev/null and b/test/render/flex/flexbox-abspos-child-001a.htm.png differ diff --git a/test/render/flex/flexbox-abspos-child-001b.htm.png b/test/render/flex/flexbox-abspos-child-001b.htm.png new file mode 100644 index 00000000..31c053b0 Binary files /dev/null and b/test/render/flex/flexbox-abspos-child-001b.htm.png differ diff --git a/test/render/flex/flexbox-align-items-center-nested-001.htm b/test/render/flex/flexbox-align-items-center-nested-001.htm new file mode 100644 index 00000000..7e27baa1 --- /dev/null +++ b/test/render/flex/flexbox-align-items-center-nested-001.htm @@ -0,0 +1,52 @@ + + + + +CSS Test: Flexbox nested containers with align-items: center and flexible items + + + + + +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-items-center-nested-001.htm.png b/test/render/flex/flexbox-align-items-center-nested-001.htm.png new file mode 100644 index 00000000..3f110032 Binary files /dev/null and b/test/render/flex/flexbox-align-items-center-nested-001.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-001a.htm b/test/render/flex/flexbox-align-self-baseline-horiz-001a.htm new file mode 100644 index 00000000..f17fc196 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-001a.htm @@ -0,0 +1,72 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' + + + + + + +
+
blk_1line
+
blk
2lines
+
super
+
sub
+
big
text
3lines
+ ital
ic +
+
+
blk_1line
+
blk
2lines
+
super
+
sub
+
big
text
3lines
+ ital
ic +
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-001a.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-001a.htm.png new file mode 100644 index 00000000..b6a57065 Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-001a.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-001b.htm b/test/render/flex/flexbox-align-self-baseline-horiz-001b.htm new file mode 100644 index 00000000..58937362 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-001b.htm @@ -0,0 +1,75 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container + + + + + + +
+
blk_1line
+
blk
2lines
+
super
+
sub
+
big
text
3lines
+ ital
ic +
+
+
blk_1line
+
blk
2lines
+
super
+
sub
+
big
text
3lines
+ ital
ic +
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-001b.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-001b.htm.png new file mode 100644 index 00000000..b6a57065 Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-001b.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-002.htm b/test/render/flex/flexbox-align-self-baseline-horiz-002.htm new file mode 100644 index 00000000..d235a481 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-002.htm @@ -0,0 +1,92 @@ + + + + + + CSS Test: Baseline alignment of flex items in fixed-size single-line flex container + + + + + + + + +
+
a
+
+ + + +
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + + +
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-002.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-002.htm.png new file mode 100644 index 00000000..da39c429 Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-002.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-003.htm b/test/render/flex/flexbox-align-self-baseline-horiz-003.htm new file mode 100644 index 00000000..682296a8 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-003.htm @@ -0,0 +1,94 @@ + + + + + + CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed + + + + + + + + +
+
a
+
+ + + +
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + + +
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + +
+
a
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-003.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-003.htm.png new file mode 100644 index 00000000..b9801e05 Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-003.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-004.htm b/test/render/flex/flexbox-align-self-baseline-horiz-004.htm new file mode 100644 index 00000000..da2ce343 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-004.htm @@ -0,0 +1,58 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container + + + + + + +
+ +
a
+
b
+
c
+ + +
d
+
e
+
f
+ + +
g
+
h
+
i
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-004.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-004.htm.png new file mode 100644 index 00000000..79bcc64c Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-004.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-005.htm b/test/render/flex/flexbox-align-self-baseline-horiz-005.htm new file mode 100644 index 00000000..dfc3d606 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-005.htm @@ -0,0 +1,58 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container + + + + + + +
+ +
a
+
b
+
c
+ + +
d
+
e
+
f
+ + +
g
+
h
+
i
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-005.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-005.htm.png new file mode 100644 index 00000000..1a7afa48 Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-005.htm.png differ diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-007.htm b/test/render/flex/flexbox-align-self-baseline-horiz-007.htm new file mode 100644 index 00000000..c6781678 --- /dev/null +++ b/test/render/flex/flexbox-align-self-baseline-horiz-007.htm @@ -0,0 +1,46 @@ + + + + + + CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other. + + + + + + +
+
one line (first)
+
one line (last)
+
two
lines and offset (last)
+
offset (first)
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-baseline-horiz-007.htm.png b/test/render/flex/flexbox-align-self-baseline-horiz-007.htm.png new file mode 100644 index 00000000..f36a198e Binary files /dev/null and b/test/render/flex/flexbox-align-self-baseline-horiz-007.htm.png differ diff --git a/test/render/flex/flexbox-align-self-horiz-001-block.htm b/test/render/flex/flexbox-align-self-horiz-001-block.htm new file mode 100644 index 00000000..3664bce1 --- /dev/null +++ b/test/render/flex/flexbox-align-self-horiz-001-block.htm @@ -0,0 +1,99 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
abc
+
stretch
+
a b c d e f
+
auto
+
unspec
+
initial
+
inherit
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-horiz-001-block.htm.png b/test/render/flex/flexbox-align-self-horiz-001-block.htm.png new file mode 100644 index 00000000..dfeb7b76 Binary files /dev/null and b/test/render/flex/flexbox-align-self-horiz-001-block.htm.png differ diff --git a/test/render/flex/flexbox-align-self-horiz-003.htm b/test/render/flex/flexbox-align-self-horiz-003.htm new file mode 100644 index 00000000..247a6e1b --- /dev/null +++ b/test/render/flex/flexbox-align-self-horiz-003.htm @@ -0,0 +1,99 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
abc
+
stretch
+
a b c d e f
+
auto
+
unspec
+
initial
+
inherit
+
normal
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-horiz-003.htm.png b/test/render/flex/flexbox-align-self-horiz-003.htm.png new file mode 100644 index 00000000..2d7feff5 Binary files /dev/null and b/test/render/flex/flexbox-align-self-horiz-003.htm.png differ diff --git a/test/render/flex/flexbox-align-self-horiz-004.htm b/test/render/flex/flexbox-align-self-horiz-004.htm new file mode 100644 index 00000000..83b09cb0 --- /dev/null +++ b/test/render/flex/flexbox-align-self-horiz-004.htm @@ -0,0 +1,86 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
+
+
+
base
+
abc
+
stretch
+
a b c d e f
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-horiz-004.htm.png b/test/render/flex/flexbox-align-self-horiz-004.htm.png new file mode 100644 index 00000000..56487add Binary files /dev/null and b/test/render/flex/flexbox-align-self-horiz-004.htm.png differ diff --git a/test/render/flex/flexbox-align-self-horiz-005.htm b/test/render/flex/flexbox-align-self-horiz-005.htm new file mode 100644 index 00000000..c005a8be --- /dev/null +++ b/test/render/flex/flexbox-align-self-horiz-005.htm @@ -0,0 +1,106 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
a b c d e f
+
stretch
+
a b c d e f
+
+ +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
a b c d e f
+
stretch
+
a b c d e f
+
+ +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
a b c d e f
+
stretch
+
a b c d e f
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-horiz-005.htm.png b/test/render/flex/flexbox-align-self-horiz-005.htm.png new file mode 100644 index 00000000..e547e5e6 Binary files /dev/null and b/test/render/flex/flexbox-align-self-horiz-005.htm.png differ diff --git a/test/render/flex/flexbox-align-self-stretch-vert-001.htm b/test/render/flex/flexbox-align-self-stretch-vert-001.htm new file mode 100644 index 00000000..10855ab7 --- /dev/null +++ b/test/render/flex/flexbox-align-self-stretch-vert-001.htm @@ -0,0 +1,52 @@ + + + + + CSS Test: Testing the sizing of a stretched horizontal flex container in a vertical flex container + + + + + + + + + +
+
+
+
+
A B C
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-stretch-vert-001.htm.png b/test/render/flex/flexbox-align-self-stretch-vert-001.htm.png new file mode 100644 index 00000000..45101bf3 Binary files /dev/null and b/test/render/flex/flexbox-align-self-stretch-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-align-self-stretch-vert-002.htm b/test/render/flex/flexbox-align-self-stretch-vert-002.htm new file mode 100644 index 00000000..1b937522 --- /dev/null +++ b/test/render/flex/flexbox-align-self-stretch-vert-002.htm @@ -0,0 +1,38 @@ + + + + + CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container + + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-stretch-vert-002.htm.png b/test/render/flex/flexbox-align-self-stretch-vert-002.htm.png new file mode 100644 index 00000000..6467f563 Binary files /dev/null and b/test/render/flex/flexbox-align-self-stretch-vert-002.htm.png differ diff --git a/test/render/flex/flexbox-align-self-vert-001.htm b/test/render/flex/flexbox-align-self-vert-001.htm new file mode 100644 index 00000000..d7e7e439 --- /dev/null +++ b/test/render/flex/flexbox-align-self-vert-001.htm @@ -0,0 +1,94 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container + + + + + + +
+
start
+
a b c d e f
+
end
+
a b c d e f
+
center
+
a b c d e f
+
base
+
abc
+
stretch
+
a b c d e f
+
auto
+
unspec
+
initial
+
inherit
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-vert-001.htm.png b/test/render/flex/flexbox-align-self-vert-001.htm.png new file mode 100644 index 00000000..4acd0dc8 Binary files /dev/null and b/test/render/flex/flexbox-align-self-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-align-self-vert-003.htm b/test/render/flex/flexbox-align-self-vert-003.htm new file mode 100644 index 00000000..68538801 --- /dev/null +++ b/test/render/flex/flexbox-align-self-vert-003.htm @@ -0,0 +1,70 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items + + + + + + +
+
start
+
a b
+
end
+
a b
+
center
+
a b
+
base
+
abc
+
stretch
+
a b
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-vert-003.htm.png b/test/render/flex/flexbox-align-self-vert-003.htm.png new file mode 100644 index 00000000..6246abda Binary files /dev/null and b/test/render/flex/flexbox-align-self-vert-003.htm.png differ diff --git a/test/render/flex/flexbox-align-self-vert-004.htm b/test/render/flex/flexbox-align-self-vert-004.htm new file mode 100644 index 00000000..1927d180 --- /dev/null +++ b/test/render/flex/flexbox-align-self-vert-004.htm @@ -0,0 +1,81 @@ + + + + + + CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items + + + + + + +
+
start
+
a b
+
end
+
a b
+
center
+
a b
+
+
+
base
+
abc
+
stretch
+
a b
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-align-self-vert-004.htm.png b/test/render/flex/flexbox-align-self-vert-004.htm.png new file mode 100644 index 00000000..c1a180ca Binary files /dev/null and b/test/render/flex/flexbox-align-self-vert-004.htm.png differ diff --git a/test/render/flex/flexbox-anonymous-items-001.htm b/test/render/flex/flexbox-anonymous-items-001.htm new file mode 100644 index 00000000..614d7510 --- /dev/null +++ b/test/render/flex/flexbox-anonymous-items-001.htm @@ -0,0 +1,29 @@ + + + + + CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering + + + + + + + +
+ a a +
x x
+ b b +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-anonymous-items-001.htm.png b/test/render/flex/flexbox-anonymous-items-001.htm.png new file mode 100644 index 00000000..ab14f71d Binary files /dev/null and b/test/render/flex/flexbox-anonymous-items-001.htm.png differ diff --git a/test/render/flex/flexbox-baseline-align-self-baseline-horiz-001.htm b/test/render/flex/flexbox-baseline-align-self-baseline-horiz-001.htm new file mode 100644 index 00000000..b3b29234 --- /dev/null +++ b/test/render/flex/flexbox-baseline-align-self-baseline-horiz-001.htm @@ -0,0 +1,64 @@ + + + + + CSS Test: Testing the baseline of a horizontal flex container with baseline-aligned flex items + + + + + + + + a +
+
b
+
c
+
d
+
+
+
e
+
f
+
g
+
+
+
h
+
i
+
j
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-align-self-baseline-horiz-001.htm.png b/test/render/flex/flexbox-baseline-align-self-baseline-horiz-001.htm.png new file mode 100644 index 00000000..6fc47130 Binary files /dev/null and b/test/render/flex/flexbox-baseline-align-self-baseline-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-baseline-align-self-baseline-vert-001.htm b/test/render/flex/flexbox-baseline-align-self-baseline-vert-001.htm new file mode 100644 index 00000000..973aa3ff --- /dev/null +++ b/test/render/flex/flexbox-baseline-align-self-baseline-vert-001.htm @@ -0,0 +1,68 @@ + + + + + CSS Test: Testing the baseline of a vertical flex container with baseline-aligned flex items + + + + + + + + + a +
+
b
+
c
+
d
+
+
+
e
+
f
+
g
+
+
+
h
+
i
+
j
+
+ + + + + diff --git a/test/render/flex/flexbox-baseline-align-self-baseline-vert-001.htm.png b/test/render/flex/flexbox-baseline-align-self-baseline-vert-001.htm.png new file mode 100644 index 00000000..9c4d99ea Binary files /dev/null and b/test/render/flex/flexbox-baseline-align-self-baseline-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-baseline-empty-001a.htm b/test/render/flex/flexbox-baseline-empty-001a.htm new file mode 100644 index 00000000..1260239c --- /dev/null +++ b/test/render/flex/flexbox-baseline-empty-001a.htm @@ -0,0 +1,49 @@ + + + + + CSS Test: Testing the baseline of an empty horizontal flex container + + + + + + + + + A +
+
+
+
+
+
+ + + + + diff --git a/test/render/flex/flexbox-baseline-empty-001a.htm.png b/test/render/flex/flexbox-baseline-empty-001a.htm.png new file mode 100644 index 00000000..8fd3b780 Binary files /dev/null and b/test/render/flex/flexbox-baseline-empty-001a.htm.png differ diff --git a/test/render/flex/flexbox-baseline-empty-001b.htm b/test/render/flex/flexbox-baseline-empty-001b.htm new file mode 100644 index 00000000..325751b4 --- /dev/null +++ b/test/render/flex/flexbox-baseline-empty-001b.htm @@ -0,0 +1,50 @@ + + + + + CSS Test: Testing the baseline of an empty vertical flex container + + + + + + + + + A +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-empty-001b.htm.png b/test/render/flex/flexbox-baseline-empty-001b.htm.png new file mode 100644 index 00000000..8fd3b780 Binary files /dev/null and b/test/render/flex/flexbox-baseline-empty-001b.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-item-horiz-001a.htm b/test/render/flex/flexbox-baseline-multi-item-horiz-001a.htm new file mode 100644 index 00000000..2a21a4ec --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-item-horiz-001a.htm @@ -0,0 +1,47 @@ + + + + + CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned + + + + + + + + a +
+
b
c
+
+
+
d
e
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-item-horiz-001a.htm.png b/test/render/flex/flexbox-baseline-multi-item-horiz-001a.htm.png new file mode 100644 index 00000000..10b053ce Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-item-horiz-001a.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-item-horiz-001b.htm b/test/render/flex/flexbox-baseline-multi-item-horiz-001b.htm new file mode 100644 index 00000000..cb241ee9 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-item-horiz-001b.htm @@ -0,0 +1,49 @@ + + + + + CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned + + + + + + + + a +
+
c
b
+
+
+
e
d
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-item-horiz-001b.htm.png b/test/render/flex/flexbox-baseline-multi-item-horiz-001b.htm.png new file mode 100644 index 00000000..10b053ce Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-item-horiz-001b.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-item-vert-001a.htm b/test/render/flex/flexbox-baseline-multi-item-vert-001a.htm new file mode 100644 index 00000000..61255631 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-item-vert-001a.htm @@ -0,0 +1,57 @@ + + + + + CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned + + + + + + + + + a +
+
b
c
+
+
+
d
e
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-item-vert-001a.htm.png b/test/render/flex/flexbox-baseline-multi-item-vert-001a.htm.png new file mode 100644 index 00000000..0e1c1fc4 Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-item-vert-001a.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-item-vert-001b.htm b/test/render/flex/flexbox-baseline-multi-item-vert-001b.htm new file mode 100644 index 00000000..54b71647 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-item-vert-001b.htm @@ -0,0 +1,59 @@ + + + + + CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned + + + + + + + + + a +
+
c
b
+
+
+
e
d
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-item-vert-001b.htm.png b/test/render/flex/flexbox-baseline-multi-item-vert-001b.htm.png new file mode 100644 index 00000000..0e1c1fc4 Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-item-vert-001b.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-line-horiz-001.htm b/test/render/flex/flexbox-baseline-multi-line-horiz-001.htm new file mode 100644 index 00000000..23d2ea6e --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-line-horiz-001.htm @@ -0,0 +1,76 @@ + + + + + CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines + + + + + + + + a + +
+
b
c
d
e
+
+ +
+
f
g
h
i
+
+ + +
+
j
k
l
m
+
+ n + + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-line-horiz-001.htm.png b/test/render/flex/flexbox-baseline-multi-line-horiz-001.htm.png new file mode 100644 index 00000000..e1621324 Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-line-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-line-horiz-002.htm b/test/render/flex/flexbox-baseline-multi-line-horiz-002.htm new file mode 100644 index 00000000..67992698 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-line-horiz-002.htm @@ -0,0 +1,76 @@ + + + + + CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines + + + + + + + + a + +
+
b
c
d
e
+
+ +
+
f
g
h
i
+
+ + +
+
j
k
l
m
+
+ n + + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-line-horiz-002.htm.png b/test/render/flex/flexbox-baseline-multi-line-horiz-002.htm.png new file mode 100644 index 00000000..fc5689f1 Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-line-horiz-002.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-line-horiz-003.htm b/test/render/flex/flexbox-baseline-multi-line-horiz-003.htm new file mode 100644 index 00000000..e19df804 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-line-horiz-003.htm @@ -0,0 +1,76 @@ + + + + + CSS Test: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line + + + + + + + + a + +
+
b
+
c
+
d
+
e
+
+ + +
+
f
+
g
+
h
+
i
+
+ + +
+
j
+
k
+
l
+
m
+
+ n + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-line-horiz-003.htm.png b/test/render/flex/flexbox-baseline-multi-line-horiz-003.htm.png new file mode 100644 index 00000000..6ce6ffa2 Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-line-horiz-003.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-line-vert-001.htm b/test/render/flex/flexbox-baseline-multi-line-vert-001.htm new file mode 100644 index 00000000..55e9acf4 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-line-vert-001.htm @@ -0,0 +1,77 @@ + + + + + CSS Test: Testing the baseline of a vertical flex container with multiple flex lines + + + + + + + + a + +
+
b
c
d
e
+
+ +
+
f
g
h
i
+
+ + +
+
j
k
l
m
+
+ n + + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-line-vert-001.htm.png b/test/render/flex/flexbox-baseline-multi-line-vert-001.htm.png new file mode 100644 index 00000000..38a3400f Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-line-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-baseline-multi-line-vert-002.htm b/test/render/flex/flexbox-baseline-multi-line-vert-002.htm new file mode 100644 index 00000000..077fb8b6 --- /dev/null +++ b/test/render/flex/flexbox-baseline-multi-line-vert-002.htm @@ -0,0 +1,78 @@ + + + + + CSS Test: Testing the baseline of a vertical flex container with multiple flex lines + + + + + + + + a + +
+
b
c
d
e
+
+ +
+
f
g
h
i
+
+ + +
+
j
k
l
m
+
+ n + + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-baseline-multi-line-vert-002.htm.png b/test/render/flex/flexbox-baseline-multi-line-vert-002.htm.png new file mode 100644 index 00000000..31fda30f Binary files /dev/null and b/test/render/flex/flexbox-baseline-multi-line-vert-002.htm.png differ diff --git a/test/render/flex/flexbox-basic-block-horiz-001.htm b/test/render/flex/flexbox-basic-block-horiz-001.htm new file mode 100644 index 00000000..86a2404a --- /dev/null +++ b/test/render/flex/flexbox-basic-block-horiz-001.htm @@ -0,0 +1,67 @@ + + + + + + CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-basic-block-horiz-001.htm.png b/test/render/flex/flexbox-basic-block-horiz-001.htm.png new file mode 100644 index 00000000..55a0a1af Binary files /dev/null and b/test/render/flex/flexbox-basic-block-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-basic-block-vert-001.htm b/test/render/flex/flexbox-basic-block-vert-001.htm new file mode 100644 index 00000000..7fa30372 --- /dev/null +++ b/test/render/flex/flexbox-basic-block-vert-001.htm @@ -0,0 +1,68 @@ + + + + + + CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-basic-block-vert-001.htm.png b/test/render/flex/flexbox-basic-block-vert-001.htm.png new file mode 100644 index 00000000..e5625a40 Binary files /dev/null and b/test/render/flex/flexbox-basic-block-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-break-request-horiz-001a.htm b/test/render/flex/flexbox-break-request-horiz-001a.htm new file mode 100644 index 00000000..3f198d9e --- /dev/null +++ b/test/render/flex/flexbox-break-request-horiz-001a.htm @@ -0,0 +1,111 @@ + + + + + CSS Test: Testing page-break-before in horizontal multi-line flex containers + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-horiz-001a.htm.png b/test/render/flex/flexbox-break-request-horiz-001a.htm.png new file mode 100644 index 00000000..ae52642a Binary files /dev/null and b/test/render/flex/flexbox-break-request-horiz-001a.htm.png differ diff --git a/test/render/flex/flexbox-break-request-horiz-001b.htm b/test/render/flex/flexbox-break-request-horiz-001b.htm new file mode 100644 index 00000000..e921f4a0 --- /dev/null +++ b/test/render/flex/flexbox-break-request-horiz-001b.htm @@ -0,0 +1,111 @@ + + + + + CSS Test: Testing page-break-after in horizontal multi-line flex containers + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-horiz-001b.htm.png b/test/render/flex/flexbox-break-request-horiz-001b.htm.png new file mode 100644 index 00000000..ae52642a Binary files /dev/null and b/test/render/flex/flexbox-break-request-horiz-001b.htm.png differ diff --git a/test/render/flex/flexbox-break-request-horiz-002a.htm b/test/render/flex/flexbox-break-request-horiz-002a.htm new file mode 100644 index 00000000..b272d359 --- /dev/null +++ b/test/render/flex/flexbox-break-request-horiz-002a.htm @@ -0,0 +1,110 @@ + + + + + CSS Test: Testing page-break-before in horizontal single-line flex containers (should have no effect) + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-horiz-002a.htm.png b/test/render/flex/flexbox-break-request-horiz-002a.htm.png new file mode 100644 index 00000000..32f06e7f Binary files /dev/null and b/test/render/flex/flexbox-break-request-horiz-002a.htm.png differ diff --git a/test/render/flex/flexbox-break-request-horiz-002b.htm b/test/render/flex/flexbox-break-request-horiz-002b.htm new file mode 100644 index 00000000..480b23f9 --- /dev/null +++ b/test/render/flex/flexbox-break-request-horiz-002b.htm @@ -0,0 +1,110 @@ + + + + + CSS Test: Testing page-break-after in horizontal single-line flex containers (should have no effect) + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-horiz-002b.htm.png b/test/render/flex/flexbox-break-request-horiz-002b.htm.png new file mode 100644 index 00000000..32f06e7f Binary files /dev/null and b/test/render/flex/flexbox-break-request-horiz-002b.htm.png differ diff --git a/test/render/flex/flexbox-break-request-vert-001a.htm b/test/render/flex/flexbox-break-request-vert-001a.htm new file mode 100644 index 00000000..0970a7f6 --- /dev/null +++ b/test/render/flex/flexbox-break-request-vert-001a.htm @@ -0,0 +1,112 @@ + + + + + CSS Test: Testing page-break-before in vertical multi-line flex containers + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-vert-001a.htm.png b/test/render/flex/flexbox-break-request-vert-001a.htm.png new file mode 100644 index 00000000..00d088a4 Binary files /dev/null and b/test/render/flex/flexbox-break-request-vert-001a.htm.png differ diff --git a/test/render/flex/flexbox-break-request-vert-001b.htm b/test/render/flex/flexbox-break-request-vert-001b.htm new file mode 100644 index 00000000..ca87ef6e --- /dev/null +++ b/test/render/flex/flexbox-break-request-vert-001b.htm @@ -0,0 +1,112 @@ + + + + + CSS Test: Testing page-break-after in vertical multi-line flex containers + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-vert-001b.htm.png b/test/render/flex/flexbox-break-request-vert-001b.htm.png new file mode 100644 index 00000000..00d088a4 Binary files /dev/null and b/test/render/flex/flexbox-break-request-vert-001b.htm.png differ diff --git a/test/render/flex/flexbox-break-request-vert-002a.htm b/test/render/flex/flexbox-break-request-vert-002a.htm new file mode 100644 index 00000000..4ad2516d --- /dev/null +++ b/test/render/flex/flexbox-break-request-vert-002a.htm @@ -0,0 +1,111 @@ + + + + + CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect) + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-vert-002a.htm.png b/test/render/flex/flexbox-break-request-vert-002a.htm.png new file mode 100644 index 00000000..c2139c89 Binary files /dev/null and b/test/render/flex/flexbox-break-request-vert-002a.htm.png differ diff --git a/test/render/flex/flexbox-break-request-vert-002b.htm b/test/render/flex/flexbox-break-request-vert-002b.htm new file mode 100644 index 00000000..012b80a7 --- /dev/null +++ b/test/render/flex/flexbox-break-request-vert-002b.htm @@ -0,0 +1,111 @@ + + + + + CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect) + + + + + + + + + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-break-request-vert-002b.htm.png b/test/render/flex/flexbox-break-request-vert-002b.htm.png new file mode 100644 index 00000000..c2139c89 Binary files /dev/null and b/test/render/flex/flexbox-break-request-vert-002b.htm.png differ diff --git a/test/render/flex/flexbox-flex-basis-content-nocanvas-001a.htm b/test/render/flex/flexbox-flex-basis-content-nocanvas-001a.htm new file mode 100644 index 00000000..e66abb4e --- /dev/null +++ b/test/render/flex/flexbox-flex-basis-content-nocanvas-001a.htm @@ -0,0 +1,83 @@ + + + + + + CSS Test: Testing "flex-basis: content" in a row-oriented flex container + + + + + + + + + + +
+
a b
+
c
+
+
+
+ + +
+
a b
+
c
+
+
+
+ + +
+
a b
+
c
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-basis-content-nocanvas-001a.htm.png b/test/render/flex/flexbox-flex-basis-content-nocanvas-001a.htm.png new file mode 100644 index 00000000..a5f351d6 Binary files /dev/null and b/test/render/flex/flexbox-flex-basis-content-nocanvas-001a.htm.png differ diff --git a/test/render/flex/flexbox-flex-basis-content-nocanvas-001b.htm b/test/render/flex/flexbox-flex-basis-content-nocanvas-001b.htm new file mode 100644 index 00000000..8b499293 --- /dev/null +++ b/test/render/flex/flexbox-flex-basis-content-nocanvas-001b.htm @@ -0,0 +1,86 @@ + + + + + + CSS Test: Testing "flex-basis: content" (set via the "flex" shorthand) + in a row-oriented flex container. + + + + + + + + + + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + +
+
a b
+
c
+
+
+ +
+ + + + + + diff --git a/test/render/flex/flexbox-flex-basis-content-nocanvas-001b.htm.png b/test/render/flex/flexbox-flex-basis-content-nocanvas-001b.htm.png new file mode 100644 index 00000000..e9be0e85 Binary files /dev/null and b/test/render/flex/flexbox-flex-basis-content-nocanvas-001b.htm.png differ diff --git a/test/render/flex/flexbox-flex-direction-column-reverse.htm b/test/render/flex/flexbox-flex-direction-column-reverse.htm new file mode 100644 index 00000000..c7bff4e6 --- /dev/null +++ b/test/render/flex/flexbox-flex-direction-column-reverse.htm @@ -0,0 +1,61 @@ + + + + + CSS Flexbox Test: Flex-direction = column-reverse + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
7
4
1
+
8
5
2
+
9
6
3
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-direction-column-reverse.htm.png b/test/render/flex/flexbox-flex-direction-column-reverse.htm.png new file mode 100644 index 00000000..a23260e4 Binary files /dev/null and b/test/render/flex/flexbox-flex-direction-column-reverse.htm.png differ diff --git a/test/render/flex/flexbox-flex-direction-column.htm b/test/render/flex/flexbox-flex-direction-column.htm new file mode 100644 index 00000000..189c04ea --- /dev/null +++ b/test/render/flex/flexbox-flex-direction-column.htm @@ -0,0 +1,60 @@ + + + + + CSS Flexbox Test: Flex-direction = column + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
1
4
7
+
2
5
8
+
3
6
9
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-direction-column.htm.png b/test/render/flex/flexbox-flex-direction-column.htm.png new file mode 100644 index 00000000..a23260e4 Binary files /dev/null and b/test/render/flex/flexbox-flex-direction-column.htm.png differ diff --git a/test/render/flex/flexbox-flex-direction-default.htm b/test/render/flex/flexbox-flex-direction-default.htm new file mode 100644 index 00000000..e4e22746 --- /dev/null +++ b/test/render/flex/flexbox-flex-direction-default.htm @@ -0,0 +1,59 @@ + + + + + CSS Flexbox Test: Flex-direction = row by default + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
1
2
3
+
4
5
6
+
7
8
9
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-direction-default.htm.png b/test/render/flex/flexbox-flex-direction-default.htm.png new file mode 100644 index 00000000..a23260e4 Binary files /dev/null and b/test/render/flex/flexbox-flex-direction-default.htm.png differ diff --git a/test/render/flex/flexbox-flex-direction-row-reverse.htm b/test/render/flex/flexbox-flex-direction-row-reverse.htm new file mode 100644 index 00000000..aff8d164 --- /dev/null +++ b/test/render/flex/flexbox-flex-direction-row-reverse.htm @@ -0,0 +1,61 @@ + + + + + CSS Flexbox Test: Flex-direction = row-reverse + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
3
2
1
+
6
5
4
+
9
8
7
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-direction-row-reverse.htm.png b/test/render/flex/flexbox-flex-direction-row-reverse.htm.png new file mode 100644 index 00000000..a23260e4 Binary files /dev/null and b/test/render/flex/flexbox-flex-direction-row-reverse.htm.png differ diff --git a/test/render/flex/flexbox-flex-direction-row.htm b/test/render/flex/flexbox-flex-direction-row.htm new file mode 100644 index 00000000..fa53bd57 --- /dev/null +++ b/test/render/flex/flexbox-flex-direction-row.htm @@ -0,0 +1,60 @@ + + + + + CSS Flexbox Test: Flex-direction = row + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
1
2
3
+
4
5
6
+
7
8
9
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-direction-row.htm.png b/test/render/flex/flexbox-flex-direction-row.htm.png new file mode 100644 index 00000000..a23260e4 Binary files /dev/null and b/test/render/flex/flexbox-flex-direction-row.htm.png differ diff --git a/test/render/flex/flexbox-flex-flow-001.htm b/test/render/flex/flexbox-flex-flow-001.htm new file mode 100644 index 00000000..1d8996d4 --- /dev/null +++ b/test/render/flex/flexbox-flex-flow-001.htm @@ -0,0 +1,129 @@ + + + + + CSS Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container + + + + + + + + +
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+ +
+ + +
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+ +
+ + +
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+ +
+ + +
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+ +
+ + +
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+
+
1
2
3
4
+
+ +
+ + +
+
1
2
3
4
+
+
+
1
2
3
4
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-flow-001.htm.png b/test/render/flex/flexbox-flex-flow-001.htm.png new file mode 100644 index 00000000..d210b04d Binary files /dev/null and b/test/render/flex/flexbox-flex-flow-001.htm.png differ diff --git a/test/render/flex/flexbox-flex-flow-002.htm b/test/render/flex/flexbox-flex-flow-002.htm new file mode 100644 index 00000000..17465ae2 --- /dev/null +++ b/test/render/flex/flexbox-flex-flow-002.htm @@ -0,0 +1,129 @@ + + + + + CSS Test: Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container + + + + + + + + +
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+ +
+ + +
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+ +
+ + +
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+ +
+ + +
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+ +
+ + +
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+
+
1
2
3
+
+ +
+ + +
+
1
2
3
+
+
+
1
2
3
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-flow-002.htm.png b/test/render/flex/flexbox-flex-flow-002.htm.png new file mode 100644 index 00000000..ec95fc23 Binary files /dev/null and b/test/render/flex/flexbox-flex-flow-002.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-default.htm b/test/render/flex/flexbox-flex-wrap-default.htm new file mode 100644 index 00000000..5741eb5e --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-default.htm @@ -0,0 +1,43 @@ + + + + + CSS Flexbox Test: Flex-wrap defaults to nowrap + + + + + + + + + +

The test passes if there is a green square and no red.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-default.htm.png b/test/render/flex/flexbox-flex-wrap-default.htm.png new file mode 100644 index 00000000..5c432eed Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-default.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-flexing.htm b/test/render/flex/flexbox-flex-wrap-flexing.htm new file mode 100644 index 00000000..72f823b9 --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-flexing.htm @@ -0,0 +1,40 @@ + + + + + CSS Flexbox Test: flex-wrap flexes widths after line breaking + + + + + + + + + + + +

Test passes if there is a green rectangle and no red.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-flexing.htm.png b/test/render/flex/flexbox-flex-wrap-flexing.htm.png new file mode 100644 index 00000000..1b9a92e7 Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-flexing.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-horiz-001.htm b/test/render/flex/flexbox-flex-wrap-horiz-001.htm new file mode 100644 index 00000000..37bd9dda --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-horiz-001.htm @@ -0,0 +1,100 @@ + + + + + CSS Test: Testing flex-wrap in horizontal flex containers + + + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-horiz-001.htm.png b/test/render/flex/flexbox-flex-wrap-horiz-001.htm.png new file mode 100644 index 00000000..70398705 Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-horiz-002.htm b/test/render/flex/flexbox-flex-wrap-horiz-002.htm new file mode 100644 index 00000000..019b53ae --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-horiz-002.htm @@ -0,0 +1,64 @@ + + + + + CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers + + + + + + + + + +
+
+ + +
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-horiz-002.htm.png b/test/render/flex/flexbox-flex-wrap-horiz-002.htm.png new file mode 100644 index 00000000..062333d6 Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-horiz-002.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-nowrap.htm b/test/render/flex/flexbox-flex-wrap-nowrap.htm new file mode 100644 index 00000000..9a287b90 --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-nowrap.htm @@ -0,0 +1,44 @@ + + + + + CSS Flexbox Test: Flex-wrap = nowrap + + + + + + + + + +

The test passes if there is a green square and no red.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-nowrap.htm.png b/test/render/flex/flexbox-flex-wrap-nowrap.htm.png new file mode 100644 index 00000000..5c432eed Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-nowrap.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-vert-001.htm b/test/render/flex/flexbox-flex-wrap-vert-001.htm new file mode 100644 index 00000000..069dfcbc --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-vert-001.htm @@ -0,0 +1,102 @@ + + + + + CSS Test: Testing flex-wrap in vertical flex containers + + + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-vert-001.htm.png b/test/render/flex/flexbox-flex-wrap-vert-001.htm.png new file mode 100644 index 00000000..c4c60aa5 Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-vert-002.htm b/test/render/flex/flexbox-flex-wrap-vert-002.htm new file mode 100644 index 00000000..64994370 --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-vert-002.htm @@ -0,0 +1,64 @@ + + + + + CSS Test: Ensure that min-height is honored for vertical multi-line flex containers + + + + + + + + + +
+
+ + +
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-vert-002.htm.png b/test/render/flex/flexbox-flex-wrap-vert-002.htm.png new file mode 100644 index 00000000..ae6c9077 Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-vert-002.htm.png differ diff --git a/test/render/flex/flexbox-flex-wrap-wrap.htm b/test/render/flex/flexbox-flex-wrap-wrap.htm new file mode 100644 index 00000000..d14b2082 --- /dev/null +++ b/test/render/flex/flexbox-flex-wrap-wrap.htm @@ -0,0 +1,60 @@ + + + + + CSS Flexbox Test: Flex-wrap = wrap + + + + + + + + + +

The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.

+
+
1
2
3
+
4
5
6
+
7
8
9
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-flex-wrap-wrap.htm.png b/test/render/flex/flexbox-flex-wrap-wrap.htm.png new file mode 100644 index 00000000..a23260e4 Binary files /dev/null and b/test/render/flex/flexbox-flex-wrap-wrap.htm.png differ diff --git a/test/render/flex/flexbox-items-as-stacking-contexts-002.htm b/test/render/flex/flexbox-items-as-stacking-contexts-002.htm new file mode 100644 index 00000000..593dfb54 --- /dev/null +++ b/test/render/flex/flexbox-items-as-stacking-contexts-002.htm @@ -0,0 +1,73 @@ + + + + + CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants + + + + + + + +
ThisIsALongUnbrokenString
HereIsSomeMoreLongText
+ + +
ThisIsALongUnbrokenString
HereIsSomeMoreLongText
+ + +
ThisIsALongUnbrokenString
HereIsSomeMoreLongText
+ + +
ThisIsALongUnbrokenString
HereIsSomeMoreLongText
+ + +
ThisIsALongUnbrokenString
HereIsSomeMoreLongText
+ + +
ThisIsALongUnbrokenString
HereIsSomeMoreLongText
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-items-as-stacking-contexts-002.htm.png b/test/render/flex/flexbox-items-as-stacking-contexts-002.htm.png new file mode 100644 index 00000000..0972738b Binary files /dev/null and b/test/render/flex/flexbox-items-as-stacking-contexts-002.htm.png differ diff --git a/test/render/flex/flexbox-items-as-stacking-contexts-003.htm b/test/render/flex/flexbox-items-as-stacking-contexts-003.htm new file mode 100644 index 00000000..8eb99bc4 --- /dev/null +++ b/test/render/flex/flexbox-items-as-stacking-contexts-003.htm @@ -0,0 +1,73 @@ + + + + + CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-items-as-stacking-contexts-003.htm.png b/test/render/flex/flexbox-items-as-stacking-contexts-003.htm.png new file mode 100644 index 00000000..05fd667b Binary files /dev/null and b/test/render/flex/flexbox-items-as-stacking-contexts-003.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-001a.htm b/test/render/flex/flexbox-justify-content-horiz-001a.htm new file mode 100644 index 00000000..4a646858 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-001a.htm @@ -0,0 +1,141 @@ + + + + + + CSS Test: Testing 'justify-content' in a horizontal flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-001a.htm.png b/test/render/flex/flexbox-justify-content-horiz-001a.htm.png new file mode 100644 index 00000000..fb552056 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-001a.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-001b.htm b/test/render/flex/flexbox-justify-content-horiz-001b.htm new file mode 100644 index 00000000..283664a1 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-001b.htm @@ -0,0 +1,147 @@ + + + + + + CSS Test: Testing 'justify-content' in a horizontal flex container with "min-width" + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-001b.htm.png b/test/render/flex/flexbox-justify-content-horiz-001b.htm.png new file mode 100644 index 00000000..1ecc9135 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-001b.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-002.htm b/test/render/flex/flexbox-justify-content-horiz-002.htm new file mode 100644 index 00000000..74bc2d44 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-002.htm @@ -0,0 +1,154 @@ + + + + + + CSS Test: Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-002.htm.png b/test/render/flex/flexbox-justify-content-horiz-002.htm.png new file mode 100644 index 00000000..76db4f6a Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-002.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-003.htm b/test/render/flex/flexbox-justify-content-horiz-003.htm new file mode 100644 index 00000000..a95237b4 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-003.htm @@ -0,0 +1,149 @@ + + + + + + CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-003.htm.png b/test/render/flex/flexbox-justify-content-horiz-003.htm.png new file mode 100644 index 00000000..ddc56250 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-003.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-004.htm b/test/render/flex/flexbox-justify-content-horiz-004.htm new file mode 100644 index 00000000..c696f7e0 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-004.htm @@ -0,0 +1,160 @@ + + + + + + CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-004.htm.png b/test/render/flex/flexbox-justify-content-horiz-004.htm.png new file mode 100644 index 00000000..0e949ed0 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-004.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-005.htm b/test/render/flex/flexbox-justify-content-horiz-005.htm new file mode 100644 index 00000000..4c57dfd3 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-005.htm @@ -0,0 +1,140 @@ + + + + + + CSS Test: Testing 'justify-content' in an auto-sized horizontal flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-005.htm.png b/test/render/flex/flexbox-justify-content-horiz-005.htm.png new file mode 100644 index 00000000..d4ca3d12 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-005.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-horiz-006.htm b/test/render/flex/flexbox-justify-content-horiz-006.htm new file mode 100644 index 00000000..91151e3c --- /dev/null +++ b/test/render/flex/flexbox-justify-content-horiz-006.htm @@ -0,0 +1,142 @@ + + + + + + CSS Test: Testing 'justify-content' in an auto-sized reversed horizontal flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-horiz-006.htm.png b/test/render/flex/flexbox-justify-content-horiz-006.htm.png new file mode 100644 index 00000000..0d19f686 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-horiz-006.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-001a.htm b/test/render/flex/flexbox-justify-content-vert-001a.htm new file mode 100644 index 00000000..a8e1335a --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-001a.htm @@ -0,0 +1,143 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-001a.htm.png b/test/render/flex/flexbox-justify-content-vert-001a.htm.png new file mode 100644 index 00000000..86cdcec9 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-001a.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-001b.htm b/test/render/flex/flexbox-justify-content-vert-001b.htm new file mode 100644 index 00000000..4f68232b --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-001b.htm @@ -0,0 +1,144 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical flex container with "min-height" + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-001b.htm.png b/test/render/flex/flexbox-justify-content-vert-001b.htm.png new file mode 100644 index 00000000..86cdcec9 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-001b.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-002.htm b/test/render/flex/flexbox-justify-content-vert-002.htm new file mode 100644 index 00000000..3416228e --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-002.htm @@ -0,0 +1,156 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-002.htm.png b/test/render/flex/flexbox-justify-content-vert-002.htm.png new file mode 100644 index 00000000..c2605500 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-002.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-003.htm b/test/render/flex/flexbox-justify-content-vert-003.htm new file mode 100644 index 00000000..d742f568 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-003.htm @@ -0,0 +1,152 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-003.htm.png b/test/render/flex/flexbox-justify-content-vert-003.htm.png new file mode 100644 index 00000000..3f2fe791 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-003.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-004.htm b/test/render/flex/flexbox-justify-content-vert-004.htm new file mode 100644 index 00000000..f6473781 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-004.htm @@ -0,0 +1,163 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-004.htm.png b/test/render/flex/flexbox-justify-content-vert-004.htm.png new file mode 100644 index 00000000..b162fab6 Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-004.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-005.htm b/test/render/flex/flexbox-justify-content-vert-005.htm new file mode 100644 index 00000000..c1a2a5b2 --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-005.htm @@ -0,0 +1,146 @@ + + + + + + CSS Test: Testing 'justify-content' in an auto-sized vertical flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-005.htm.png b/test/render/flex/flexbox-justify-content-vert-005.htm.png new file mode 100644 index 00000000..0b6fd66b Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-005.htm.png differ diff --git a/test/render/flex/flexbox-justify-content-vert-006.htm b/test/render/flex/flexbox-justify-content-vert-006.htm new file mode 100644 index 00000000..9cb36b1e --- /dev/null +++ b/test/render/flex/flexbox-justify-content-vert-006.htm @@ -0,0 +1,143 @@ + + + + + + CSS Test: Testing 'justify-content' in a vertical flex container + + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-justify-content-vert-006.htm.png b/test/render/flex/flexbox-justify-content-vert-006.htm.png new file mode 100644 index 00000000..88aae81b Binary files /dev/null and b/test/render/flex/flexbox-justify-content-vert-006.htm.png differ diff --git a/test/render/flex/flexbox-margin-auto-horiz-001.htm b/test/render/flex/flexbox-margin-auto-horiz-001.htm new file mode 100644 index 00000000..5bf136e9 --- /dev/null +++ b/test/render/flex/flexbox-margin-auto-horiz-001.htm @@ -0,0 +1,85 @@ + + + + + + CSS Test: Testing horizontal auto margins on flex items in a horizontal flex container + + + + + + + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-margin-auto-horiz-001.htm.png b/test/render/flex/flexbox-margin-auto-horiz-001.htm.png new file mode 100644 index 00000000..5b484565 Binary files /dev/null and b/test/render/flex/flexbox-margin-auto-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-margin-auto-horiz-002.htm b/test/render/flex/flexbox-margin-auto-horiz-002.htm new file mode 100644 index 00000000..0ac66b02 --- /dev/null +++ b/test/render/flex/flexbox-margin-auto-horiz-002.htm @@ -0,0 +1,70 @@ + + + + + + CSS Test: Testing vertical auto margins on flex items in a horizontal flex container + + + + + + + + +
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-margin-auto-horiz-002.htm.png b/test/render/flex/flexbox-margin-auto-horiz-002.htm.png new file mode 100644 index 00000000..ce44257d Binary files /dev/null and b/test/render/flex/flexbox-margin-auto-horiz-002.htm.png differ diff --git a/test/render/flex/flexbox-mbp-horiz-001-reverse.htm b/test/render/flex/flexbox-mbp-horiz-001-reverse.htm new file mode 100644 index 00000000..389c222d --- /dev/null +++ b/test/render/flex/flexbox-mbp-horiz-001-reverse.htm @@ -0,0 +1,73 @@ + + + + + + CSS Test: Testing borders on flex items in a row-reverse horizontal flex container + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-mbp-horiz-001-reverse.htm.png b/test/render/flex/flexbox-mbp-horiz-001-reverse.htm.png new file mode 100644 index 00000000..f6f23db3 Binary files /dev/null and b/test/render/flex/flexbox-mbp-horiz-001-reverse.htm.png differ diff --git a/test/render/flex/flexbox-mbp-horiz-001.htm b/test/render/flex/flexbox-mbp-horiz-001.htm new file mode 100644 index 00000000..ea948a10 --- /dev/null +++ b/test/render/flex/flexbox-mbp-horiz-001.htm @@ -0,0 +1,71 @@ + + + + + + CSS Test: Testing borders on flex items in a horizontal flex container + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-mbp-horiz-001.htm.png b/test/render/flex/flexbox-mbp-horiz-001.htm.png new file mode 100644 index 00000000..cec56939 Binary files /dev/null and b/test/render/flex/flexbox-mbp-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-mbp-horiz-002a.htm b/test/render/flex/flexbox-mbp-horiz-002a.htm new file mode 100644 index 00000000..02ab2ec1 --- /dev/null +++ b/test/render/flex/flexbox-mbp-horiz-002a.htm @@ -0,0 +1,75 @@ + + + + + + CSS Test: Testing margins and borders on flex items in a horizontal flex container + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-mbp-horiz-002a.htm.png b/test/render/flex/flexbox-mbp-horiz-002a.htm.png new file mode 100644 index 00000000..8f94167f Binary files /dev/null and b/test/render/flex/flexbox-mbp-horiz-002a.htm.png differ diff --git a/test/render/flex/flexbox-mbp-horiz-002b.htm b/test/render/flex/flexbox-mbp-horiz-002b.htm new file mode 100644 index 00000000..c1f7cfbc --- /dev/null +++ b/test/render/flex/flexbox-mbp-horiz-002b.htm @@ -0,0 +1,82 @@ + + + + + + CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container + + + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-mbp-horiz-002b.htm.png b/test/render/flex/flexbox-mbp-horiz-002b.htm.png new file mode 100644 index 00000000..8f94167f Binary files /dev/null and b/test/render/flex/flexbox-mbp-horiz-002b.htm.png differ diff --git a/test/render/flex/flexbox-mbp-horiz-003-reverse.htm b/test/render/flex/flexbox-mbp-horiz-003-reverse.htm new file mode 100644 index 00000000..0417ff1e --- /dev/null +++ b/test/render/flex/flexbox-mbp-horiz-003-reverse.htm @@ -0,0 +1,77 @@ + + + + + + CSS Test: Testing borders and padding on a row-reverse horizontal flex container and its flex items + + + + + + +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-mbp-horiz-003-reverse.htm.png b/test/render/flex/flexbox-mbp-horiz-003-reverse.htm.png new file mode 100644 index 00000000..8f27a880 Binary files /dev/null and b/test/render/flex/flexbox-mbp-horiz-003-reverse.htm.png differ diff --git a/test/render/flex/flexbox-mbp-horiz-003.htm b/test/render/flex/flexbox-mbp-horiz-003.htm new file mode 100644 index 00000000..13e851e9 --- /dev/null +++ b/test/render/flex/flexbox-mbp-horiz-003.htm @@ -0,0 +1,76 @@ + + + + + + CSS Test: Testing borders and padding on a horizontal flex container and its flex items + + + + + + +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-mbp-horiz-003.htm.png b/test/render/flex/flexbox-mbp-horiz-003.htm.png new file mode 100644 index 00000000..bd332091 Binary files /dev/null and b/test/render/flex/flexbox-mbp-horiz-003.htm.png differ diff --git a/test/render/flex/flexbox-order-from-lowest.htm b/test/render/flex/flexbox-order-from-lowest.htm new file mode 100644 index 00000000..fb5cf124 --- /dev/null +++ b/test/render/flex/flexbox-order-from-lowest.htm @@ -0,0 +1,39 @@ + + + + + CSS Test: flex container layout starts with lowest order item + + + + + + + + +

Test passes if the paragraph below reads 'First,Second,Third'.

+
+

Third

+

Second,

+

First,

+
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-order-from-lowest.htm.png b/test/render/flex/flexbox-order-from-lowest.htm.png new file mode 100644 index 00000000..91f98b3a Binary files /dev/null and b/test/render/flex/flexbox-order-from-lowest.htm.png differ diff --git a/test/render/flex/flexbox-order-only-flexitems.htm b/test/render/flex/flexbox-order-only-flexitems.htm new file mode 100644 index 00000000..4211ac1c --- /dev/null +++ b/test/render/flex/flexbox-order-only-flexitems.htm @@ -0,0 +1,40 @@ + + + + + CSS Test: order only affects flex items + + + + + + + + + +

Test passes if the paragraph below reads 'First, Second, Third'.

+
+ First, + Second, + Third +
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-order-only-flexitems.htm.png b/test/render/flex/flexbox-order-only-flexitems.htm.png new file mode 100644 index 00000000..1c26ed8b Binary files /dev/null and b/test/render/flex/flexbox-order-only-flexitems.htm.png differ diff --git a/test/render/flex/flexbox-overflow-horiz-001.htm b/test/render/flex/flexbox-overflow-horiz-001.htm new file mode 100644 index 00000000..8e7699ec --- /dev/null +++ b/test/render/flex/flexbox-overflow-horiz-001.htm @@ -0,0 +1,58 @@ + + + + + CSS Test: Testing 'overflow' property on a horizontal flex container, with contents not overflowing + + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-horiz-001.htm.png b/test/render/flex/flexbox-overflow-horiz-001.htm.png new file mode 100644 index 00000000..84a85b52 Binary files /dev/null and b/test/render/flex/flexbox-overflow-horiz-001.htm.png differ diff --git a/test/render/flex/flexbox-overflow-horiz-002.htm b/test/render/flex/flexbox-overflow-horiz-002.htm new file mode 100644 index 00000000..5eec845e --- /dev/null +++ b/test/render/flex/flexbox-overflow-horiz-002.htm @@ -0,0 +1,54 @@ + + + + + CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-items: center' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-horiz-002.htm.png b/test/render/flex/flexbox-overflow-horiz-002.htm.png new file mode 100644 index 00000000..a052a42c Binary files /dev/null and b/test/render/flex/flexbox-overflow-horiz-002.htm.png differ diff --git a/test/render/flex/flexbox-overflow-horiz-003.htm b/test/render/flex/flexbox-overflow-horiz-003.htm new file mode 100644 index 00000000..dc587e4b --- /dev/null +++ b/test/render/flex/flexbox-overflow-horiz-003.htm @@ -0,0 +1,51 @@ + + + + + CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-horiz-003.htm.png b/test/render/flex/flexbox-overflow-horiz-003.htm.png new file mode 100644 index 00000000..18efa69c Binary files /dev/null and b/test/render/flex/flexbox-overflow-horiz-003.htm.png differ diff --git a/test/render/flex/flexbox-overflow-horiz-004.htm b/test/render/flex/flexbox-overflow-horiz-004.htm new file mode 100644 index 00000000..91945057 --- /dev/null +++ b/test/render/flex/flexbox-overflow-horiz-004.htm @@ -0,0 +1,51 @@ + + + + + CSS Test: Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-horiz-004.htm.png b/test/render/flex/flexbox-overflow-horiz-004.htm.png new file mode 100644 index 00000000..12842f7d Binary files /dev/null and b/test/render/flex/flexbox-overflow-horiz-004.htm.png differ diff --git a/test/render/flex/flexbox-overflow-horiz-005.htm b/test/render/flex/flexbox-overflow-horiz-005.htm new file mode 100644 index 00000000..83d57fbe --- /dev/null +++ b/test/render/flex/flexbox-overflow-horiz-005.htm @@ -0,0 +1,53 @@ + + + + + CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-horiz-005.htm.png b/test/render/flex/flexbox-overflow-horiz-005.htm.png new file mode 100644 index 00000000..4bdd01bf Binary files /dev/null and b/test/render/flex/flexbox-overflow-horiz-005.htm.png differ diff --git a/test/render/flex/flexbox-overflow-vert-001.htm b/test/render/flex/flexbox-overflow-vert-001.htm new file mode 100644 index 00000000..5aaf5fda --- /dev/null +++ b/test/render/flex/flexbox-overflow-vert-001.htm @@ -0,0 +1,58 @@ + + + + + CSS Test: Testing 'overflow' property on a vertical flex container + + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-vert-001.htm.png b/test/render/flex/flexbox-overflow-vert-001.htm.png new file mode 100644 index 00000000..5ecaedfd Binary files /dev/null and b/test/render/flex/flexbox-overflow-vert-001.htm.png differ diff --git a/test/render/flex/flexbox-overflow-vert-002.htm b/test/render/flex/flexbox-overflow-vert-002.htm new file mode 100644 index 00000000..5085f7c4 --- /dev/null +++ b/test/render/flex/flexbox-overflow-vert-002.htm @@ -0,0 +1,54 @@ + + + + + CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-items: center' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-vert-002.htm.png b/test/render/flex/flexbox-overflow-vert-002.htm.png new file mode 100644 index 00000000..f7308d5c Binary files /dev/null and b/test/render/flex/flexbox-overflow-vert-002.htm.png differ diff --git a/test/render/flex/flexbox-overflow-vert-003.htm b/test/render/flex/flexbox-overflow-vert-003.htm new file mode 100644 index 00000000..6a920e44 --- /dev/null +++ b/test/render/flex/flexbox-overflow-vert-003.htm @@ -0,0 +1,51 @@ + + + + + CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-vert-003.htm.png b/test/render/flex/flexbox-overflow-vert-003.htm.png new file mode 100644 index 00000000..1102be21 Binary files /dev/null and b/test/render/flex/flexbox-overflow-vert-003.htm.png differ diff --git a/test/render/flex/flexbox-overflow-vert-004.htm b/test/render/flex/flexbox-overflow-vert-004.htm new file mode 100644 index 00000000..db61fa17 --- /dev/null +++ b/test/render/flex/flexbox-overflow-vert-004.htm @@ -0,0 +1,51 @@ + + + + + CSS Test: Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-vert-004.htm.png b/test/render/flex/flexbox-overflow-vert-004.htm.png new file mode 100644 index 00000000..f22c4ed8 Binary files /dev/null and b/test/render/flex/flexbox-overflow-vert-004.htm.png differ diff --git a/test/render/flex/flexbox-overflow-vert-005.htm b/test/render/flex/flexbox-overflow-vert-005.htm new file mode 100644 index 00000000..06026a24 --- /dev/null +++ b/test/render/flex/flexbox-overflow-vert-005.htm @@ -0,0 +1,53 @@ + + + + + CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around' + + + + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-overflow-vert-005.htm.png b/test/render/flex/flexbox-overflow-vert-005.htm.png new file mode 100644 index 00000000..dff1df57 Binary files /dev/null and b/test/render/flex/flexbox-overflow-vert-005.htm.png differ diff --git a/test/render/flex/flexbox-paint-ordering-003.htm b/test/render/flex/flexbox-paint-ordering-003.htm new file mode 100644 index 00000000..c3b67dba --- /dev/null +++ b/test/render/flex/flexbox-paint-ordering-003.htm @@ -0,0 +1,55 @@ + + + + + CSS Test: Testing that paint order isn't influenced + by "order" for absolutely positioned flex children + + + + + + + +
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-paint-ordering-003.htm.png b/test/render/flex/flexbox-paint-ordering-003.htm.png new file mode 100644 index 00000000..ec539b62 Binary files /dev/null and b/test/render/flex/flexbox-paint-ordering-003.htm.png differ diff --git a/test/render/flex/flexbox-root-node-001a.htm b/test/render/flex/flexbox-root-node-001a.htm new file mode 100644 index 00000000..c97d252d --- /dev/null +++ b/test/render/flex/flexbox-root-node-001a.htm @@ -0,0 +1,26 @@ + + + + + CSS Test: Testing 'display:flex' on root node + + + + + + + centered + + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-root-node-001a.htm.png b/test/render/flex/flexbox-root-node-001a.htm.png new file mode 100644 index 00000000..339ccae7 Binary files /dev/null and b/test/render/flex/flexbox-root-node-001a.htm.png differ diff --git a/test/render/flex/flexbox-root-node-001b.htm b/test/render/flex/flexbox-root-node-001b.htm new file mode 100644 index 00000000..c3048b11 --- /dev/null +++ b/test/render/flex/flexbox-root-node-001b.htm @@ -0,0 +1,24 @@ + + + + + CSS Test: Testing 'display:flex' on root node + + + + + +centered + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-root-node-001b.htm.png b/test/render/flex/flexbox-root-node-001b.htm.png new file mode 100644 index 00000000..339ccae7 Binary files /dev/null and b/test/render/flex/flexbox-root-node-001b.htm.png differ diff --git a/test/render/flex/flexbox-single-line-clamp-1.htm b/test/render/flex/flexbox-single-line-clamp-1.htm new file mode 100644 index 00000000..39adff3e --- /dev/null +++ b/test/render/flex/flexbox-single-line-clamp-1.htm @@ -0,0 +1,36 @@ + + + + +CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size. + + + + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox-single-line-clamp-1.htm.png b/test/render/flex/flexbox-single-line-clamp-1.htm.png new file mode 100644 index 00000000..58541d24 Binary files /dev/null and b/test/render/flex/flexbox-single-line-clamp-1.htm.png differ diff --git a/test/render/flex/flexbox-single-line-clamp-2.htm b/test/render/flex/flexbox-single-line-clamp-2.htm new file mode 100644 index 00000000..70346d7a --- /dev/null +++ b/test/render/flex/flexbox-single-line-clamp-2.htm @@ -0,0 +1,43 @@ + + + + +CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size. + + + + +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox-single-line-clamp-2.htm.png b/test/render/flex/flexbox-single-line-clamp-2.htm.png new file mode 100644 index 00000000..bc335cb0 Binary files /dev/null and b/test/render/flex/flexbox-single-line-clamp-2.htm.png differ diff --git a/test/render/flex/flexbox-table-fixup-001.htm b/test/render/flex/flexbox-table-fixup-001.htm new file mode 100644 index 00000000..b6dbb12d --- /dev/null +++ b/test/render/flex/flexbox-table-fixup-001.htm @@ -0,0 +1,64 @@ + + + + + + CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item + + + + + + + + +
cell1cell2
+ + +
cell1t
+ + +
cell1
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-table-fixup-001.htm.png b/test/render/flex/flexbox-table-fixup-001.htm.png new file mode 100644 index 00000000..842f3a92 Binary files /dev/null and b/test/render/flex/flexbox-table-fixup-001.htm.png differ diff --git a/test/render/flex/flexbox-whitespace-handling-002.htm b/test/render/flex/flexbox-whitespace-handling-002.htm new file mode 100644 index 00000000..b63cbb34 --- /dev/null +++ b/test/render/flex/flexbox-whitespace-handling-002.htm @@ -0,0 +1,55 @@ + + + + + + CSS Test: Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set + + + + + + + + +
abc
+
abc
+
abc
+ + +
abc
+
abc
+
abc
+ + +
abc
+
abc
+
abc
+ + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-whitespace-handling-002.htm.png b/test/render/flex/flexbox-whitespace-handling-002.htm.png new file mode 100644 index 00000000..2f985adb Binary files /dev/null and b/test/render/flex/flexbox-whitespace-handling-002.htm.png differ diff --git a/test/render/flex/flexbox-with-pseudo-elements-001.htm b/test/render/flex/flexbox-with-pseudo-elements-001.htm new file mode 100644 index 00000000..205dc9c2 --- /dev/null +++ b/test/render/flex/flexbox-with-pseudo-elements-001.htm @@ -0,0 +1,58 @@ + + + + + CSS Test: Testing that generated content nodes are treated as a flex items + + + + + + + +
+ x +
y
+ z +
+
+ x +
y
+ z +
+
+ x +
y
+ z +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-with-pseudo-elements-001.htm.png b/test/render/flex/flexbox-with-pseudo-elements-001.htm.png new file mode 100644 index 00000000..0c026962 Binary files /dev/null and b/test/render/flex/flexbox-with-pseudo-elements-001.htm.png differ diff --git a/test/render/flex/flexbox-with-pseudo-elements-002.htm b/test/render/flex/flexbox-with-pseudo-elements-002.htm new file mode 100644 index 00000000..a4e144d7 --- /dev/null +++ b/test/render/flex/flexbox-with-pseudo-elements-002.htm @@ -0,0 +1,81 @@ + + + + + CSS Test: Testing that generated content nodes are treated as a flex items, and honor 'order' + + + + + + + + +
+
I
+
+ + +
+
I
+
+ + +
+
I
+
+ + +
+
I
+
+ + +
+
I
+
+ + +
+
I
+
+ + +
+
I
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/flexbox-with-pseudo-elements-002.htm.png b/test/render/flex/flexbox-with-pseudo-elements-002.htm.png new file mode 100644 index 00000000..4f5a4305 Binary files /dev/null and b/test/render/flex/flexbox-with-pseudo-elements-002.htm.png differ diff --git a/test/render/flex/flexbox_absolute-atomic.htm b/test/render/flex/flexbox_absolute-atomic.htm new file mode 100644 index 00000000..a4890645 --- /dev/null +++ b/test/render/flex/flexbox_absolute-atomic.htm @@ -0,0 +1,33 @@ + + + +flexbox | abspos atomic flexitems + + + + + +
+
filler
+
filler
+
filler
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_absolute-atomic.htm.png b/test/render/flex/flexbox_absolute-atomic.htm.png new file mode 100644 index 00000000..0b54584b Binary files /dev/null and b/test/render/flex/flexbox_absolute-atomic.htm.png differ diff --git a/test/render/flex/flexbox_align-content-center.htm b/test/render/flex/flexbox_align-content-center.htm new file mode 100644 index 00000000..273d7293 --- /dev/null +++ b/test/render/flex/flexbox_align-content-center.htm @@ -0,0 +1,41 @@ + + + +flexbox | align-content: center + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-center.htm.png b/test/render/flex/flexbox_align-content-center.htm.png new file mode 100644 index 00000000..e949f70c Binary files /dev/null and b/test/render/flex/flexbox_align-content-center.htm.png differ diff --git a/test/render/flex/flexbox_align-content-flexend.htm b/test/render/flex/flexbox_align-content-flexend.htm new file mode 100644 index 00000000..34a770c2 --- /dev/null +++ b/test/render/flex/flexbox_align-content-flexend.htm @@ -0,0 +1,41 @@ + + + +flexbox | align-content: flex-end + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-flexend.htm.png b/test/render/flex/flexbox_align-content-flexend.htm.png new file mode 100644 index 00000000..0013c5d5 Binary files /dev/null and b/test/render/flex/flexbox_align-content-flexend.htm.png differ diff --git a/test/render/flex/flexbox_align-content-flexstart.htm b/test/render/flex/flexbox_align-content-flexstart.htm new file mode 100644 index 00000000..6cf2fae9 --- /dev/null +++ b/test/render/flex/flexbox_align-content-flexstart.htm @@ -0,0 +1,41 @@ + + + +flexbox | align-content: flex-start + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-flexstart.htm.png b/test/render/flex/flexbox_align-content-flexstart.htm.png new file mode 100644 index 00000000..04c663e3 Binary files /dev/null and b/test/render/flex/flexbox_align-content-flexstart.htm.png differ diff --git a/test/render/flex/flexbox_align-content-spacearound.htm b/test/render/flex/flexbox_align-content-spacearound.htm new file mode 100644 index 00000000..29c765a4 --- /dev/null +++ b/test/render/flex/flexbox_align-content-spacearound.htm @@ -0,0 +1,41 @@ + + + +flexbox | align-content: space-around + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-spacearound.htm.png b/test/render/flex/flexbox_align-content-spacearound.htm.png new file mode 100644 index 00000000..9c4fae5d Binary files /dev/null and b/test/render/flex/flexbox_align-content-spacearound.htm.png differ diff --git a/test/render/flex/flexbox_align-content-spacebetween.htm b/test/render/flex/flexbox_align-content-spacebetween.htm new file mode 100644 index 00000000..fc21bf7a --- /dev/null +++ b/test/render/flex/flexbox_align-content-spacebetween.htm @@ -0,0 +1,41 @@ + + + +flexbox | align-content: space-between + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-spacebetween.htm.png b/test/render/flex/flexbox_align-content-spacebetween.htm.png new file mode 100644 index 00000000..b305e476 Binary files /dev/null and b/test/render/flex/flexbox_align-content-spacebetween.htm.png differ diff --git a/test/render/flex/flexbox_align-content-stretch-2.htm b/test/render/flex/flexbox_align-content-stretch-2.htm new file mode 100644 index 00000000..47ddf2f7 --- /dev/null +++ b/test/render/flex/flexbox_align-content-stretch-2.htm @@ -0,0 +1,40 @@ + + + +flexbox | align-content: stretch + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-stretch-2.htm.png b/test/render/flex/flexbox_align-content-stretch-2.htm.png new file mode 100644 index 00000000..cfb61e96 Binary files /dev/null and b/test/render/flex/flexbox_align-content-stretch-2.htm.png differ diff --git a/test/render/flex/flexbox_align-content-stretch.htm b/test/render/flex/flexbox_align-content-stretch.htm new file mode 100644 index 00000000..86b4f076 --- /dev/null +++ b/test/render/flex/flexbox_align-content-stretch.htm @@ -0,0 +1,41 @@ + + + +flexbox | align-content: stretch + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-content-stretch.htm.png b/test/render/flex/flexbox_align-content-stretch.htm.png new file mode 100644 index 00000000..3cb58461 Binary files /dev/null and b/test/render/flex/flexbox_align-content-stretch.htm.png differ diff --git a/test/render/flex/flexbox_align-items-baseline.htm b/test/render/flex/flexbox_align-items-baseline.htm new file mode 100644 index 00000000..eb2d0101 --- /dev/null +++ b/test/render/flex/flexbox_align-items-baseline.htm @@ -0,0 +1,47 @@ + + + +flexbox | align-items: baseline + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-baseline.htm.png b/test/render/flex/flexbox_align-items-baseline.htm.png new file mode 100644 index 00000000..2b556824 Binary files /dev/null and b/test/render/flex/flexbox_align-items-baseline.htm.png differ diff --git a/test/render/flex/flexbox_align-items-center-2.htm b/test/render/flex/flexbox_align-items-center-2.htm new file mode 100644 index 00000000..0881d30a --- /dev/null +++ b/test/render/flex/flexbox_align-items-center-2.htm @@ -0,0 +1,46 @@ + + + +flexbox | align-items: center + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-center-2.htm.png b/test/render/flex/flexbox_align-items-center-2.htm.png new file mode 100644 index 00000000..a4998fd8 Binary files /dev/null and b/test/render/flex/flexbox_align-items-center-2.htm.png differ diff --git a/test/render/flex/flexbox_align-items-center.htm b/test/render/flex/flexbox_align-items-center.htm new file mode 100644 index 00000000..d73dfee4 --- /dev/null +++ b/test/render/flex/flexbox_align-items-center.htm @@ -0,0 +1,40 @@ + + + +flexbox | align-items: center + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-center.htm.png b/test/render/flex/flexbox_align-items-center.htm.png new file mode 100644 index 00000000..13c98376 Binary files /dev/null and b/test/render/flex/flexbox_align-items-center.htm.png differ diff --git a/test/render/flex/flexbox_align-items-flexend-2.htm b/test/render/flex/flexbox_align-items-flexend-2.htm new file mode 100644 index 00000000..c33c0315 --- /dev/null +++ b/test/render/flex/flexbox_align-items-flexend-2.htm @@ -0,0 +1,45 @@ + + + +flexbox | align-items: flex-end + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-flexend-2.htm.png b/test/render/flex/flexbox_align-items-flexend-2.htm.png new file mode 100644 index 00000000..d755125b Binary files /dev/null and b/test/render/flex/flexbox_align-items-flexend-2.htm.png differ diff --git a/test/render/flex/flexbox_align-items-flexend.htm b/test/render/flex/flexbox_align-items-flexend.htm new file mode 100644 index 00000000..83a9d3cb --- /dev/null +++ b/test/render/flex/flexbox_align-items-flexend.htm @@ -0,0 +1,39 @@ + + + +flexbox | align-items: flex-end + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-flexend.htm.png b/test/render/flex/flexbox_align-items-flexend.htm.png new file mode 100644 index 00000000..81acb616 Binary files /dev/null and b/test/render/flex/flexbox_align-items-flexend.htm.png differ diff --git a/test/render/flex/flexbox_align-items-flexstart-2.htm b/test/render/flex/flexbox_align-items-flexstart-2.htm new file mode 100644 index 00000000..61a93dee --- /dev/null +++ b/test/render/flex/flexbox_align-items-flexstart-2.htm @@ -0,0 +1,45 @@ + + + +flexbox | align-items: flex-start + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-flexstart-2.htm.png b/test/render/flex/flexbox_align-items-flexstart-2.htm.png new file mode 100644 index 00000000..f2a887bd Binary files /dev/null and b/test/render/flex/flexbox_align-items-flexstart-2.htm.png differ diff --git a/test/render/flex/flexbox_align-items-flexstart.htm b/test/render/flex/flexbox_align-items-flexstart.htm new file mode 100644 index 00000000..19e85049 --- /dev/null +++ b/test/render/flex/flexbox_align-items-flexstart.htm @@ -0,0 +1,39 @@ + + + +flexbox | align-items: flex-start + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-flexstart.htm.png b/test/render/flex/flexbox_align-items-flexstart.htm.png new file mode 100644 index 00000000..0ca4d044 Binary files /dev/null and b/test/render/flex/flexbox_align-items-flexstart.htm.png differ diff --git a/test/render/flex/flexbox_align-items-stretch-2.htm b/test/render/flex/flexbox_align-items-stretch-2.htm new file mode 100644 index 00000000..9bd23b32 --- /dev/null +++ b/test/render/flex/flexbox_align-items-stretch-2.htm @@ -0,0 +1,36 @@ + + + +flexbox | align-items: stretch + + + + + +
+ PASS + + x +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-stretch-2.htm.png b/test/render/flex/flexbox_align-items-stretch-2.htm.png new file mode 100644 index 00000000..3ac891b9 Binary files /dev/null and b/test/render/flex/flexbox_align-items-stretch-2.htm.png differ diff --git a/test/render/flex/flexbox_align-items-stretch.htm b/test/render/flex/flexbox_align-items-stretch.htm new file mode 100644 index 00000000..9dec9f37 --- /dev/null +++ b/test/render/flex/flexbox_align-items-stretch.htm @@ -0,0 +1,44 @@ + + + +flexbox | align-items: stretch + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-items-stretch.htm.png b/test/render/flex/flexbox_align-items-stretch.htm.png new file mode 100644 index 00000000..178d4d19 Binary files /dev/null and b/test/render/flex/flexbox_align-items-stretch.htm.png differ diff --git a/test/render/flex/flexbox_align-self-auto.htm b/test/render/flex/flexbox_align-self-auto.htm new file mode 100644 index 00000000..14fa46bd --- /dev/null +++ b/test/render/flex/flexbox_align-self-auto.htm @@ -0,0 +1,42 @@ + + + +flexbox | align-self: auto + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-self-auto.htm.png b/test/render/flex/flexbox_align-self-auto.htm.png new file mode 100644 index 00000000..81acb616 Binary files /dev/null and b/test/render/flex/flexbox_align-self-auto.htm.png differ diff --git a/test/render/flex/flexbox_align-self-baseline.htm b/test/render/flex/flexbox_align-self-baseline.htm new file mode 100644 index 00000000..07de6419 --- /dev/null +++ b/test/render/flex/flexbox_align-self-baseline.htm @@ -0,0 +1,43 @@ + + + +flexbox | align-self: baseline + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-self-baseline.htm.png b/test/render/flex/flexbox_align-self-baseline.htm.png new file mode 100644 index 00000000..b91ccf0f Binary files /dev/null and b/test/render/flex/flexbox_align-self-baseline.htm.png differ diff --git a/test/render/flex/flexbox_align-self-center.htm b/test/render/flex/flexbox_align-self-center.htm new file mode 100644 index 00000000..bec1a781 --- /dev/null +++ b/test/render/flex/flexbox_align-self-center.htm @@ -0,0 +1,43 @@ + + + +flexbox | align-self: center + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-self-center.htm.png b/test/render/flex/flexbox_align-self-center.htm.png new file mode 100644 index 00000000..649ed6ea Binary files /dev/null and b/test/render/flex/flexbox_align-self-center.htm.png differ diff --git a/test/render/flex/flexbox_align-self-flexend.htm b/test/render/flex/flexbox_align-self-flexend.htm new file mode 100644 index 00000000..395137d6 --- /dev/null +++ b/test/render/flex/flexbox_align-self-flexend.htm @@ -0,0 +1,42 @@ + + + +flexbox | align-self: flex-end + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-self-flexend.htm.png b/test/render/flex/flexbox_align-self-flexend.htm.png new file mode 100644 index 00000000..129a5c72 Binary files /dev/null and b/test/render/flex/flexbox_align-self-flexend.htm.png differ diff --git a/test/render/flex/flexbox_align-self-flexstart.htm b/test/render/flex/flexbox_align-self-flexstart.htm new file mode 100644 index 00000000..1e4519cb --- /dev/null +++ b/test/render/flex/flexbox_align-self-flexstart.htm @@ -0,0 +1,42 @@ + + + +flexbox | align-self: flex-start + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-self-flexstart.htm.png b/test/render/flex/flexbox_align-self-flexstart.htm.png new file mode 100644 index 00000000..914e7dbe Binary files /dev/null and b/test/render/flex/flexbox_align-self-flexstart.htm.png differ diff --git a/test/render/flex/flexbox_align-self-stretch.htm b/test/render/flex/flexbox_align-self-stretch.htm new file mode 100644 index 00000000..a8a94cae --- /dev/null +++ b/test/render/flex/flexbox_align-self-stretch.htm @@ -0,0 +1,44 @@ + + + +flexbox | align-self: stretch + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_align-self-stretch.htm.png b/test/render/flex/flexbox_align-self-stretch.htm.png new file mode 100644 index 00000000..40f8b2b5 Binary files /dev/null and b/test/render/flex/flexbox_align-self-stretch.htm.png differ diff --git a/test/render/flex/flexbox_box-clear.htm b/test/render/flex/flexbox_box-clear.htm new file mode 100644 index 00000000..0bc06381 --- /dev/null +++ b/test/render/flex/flexbox_box-clear.htm @@ -0,0 +1,34 @@ + + + +flexbox | cleared box + + + + + +
filler
+ +
+
Yellow box should be below the blue box
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_box-clear.htm.png b/test/render/flex/flexbox_box-clear.htm.png new file mode 100644 index 00000000..4d382dc8 Binary files /dev/null and b/test/render/flex/flexbox_box-clear.htm.png differ diff --git a/test/render/flex/flexbox_columns.htm b/test/render/flex/flexbox_columns.htm new file mode 100644 index 00000000..c598e909 --- /dev/null +++ b/test/render/flex/flexbox_columns.htm @@ -0,0 +1,30 @@ + + + +flexbox | multicol + + + + + +
    +
  • one two three four
    • +
  • filler
    • +
  • filler
    • +
  • filler
    • +
  • filler
    • +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_columns.htm.png b/test/render/flex/flexbox_columns.htm.png new file mode 100644 index 00000000..93570db1 Binary files /dev/null and b/test/render/flex/flexbox_columns.htm.png differ diff --git a/test/render/flex/flexbox_direction-column-reverse.htm b/test/render/flex/flexbox_direction-column-reverse.htm new file mode 100644 index 00000000..504c3b1c --- /dev/null +++ b/test/render/flex/flexbox_direction-column-reverse.htm @@ -0,0 +1,36 @@ + + + +flexbox | flex-direction: column-reverse + + + + + +
+ filler + filler + filler + filler +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_direction-column-reverse.htm.png b/test/render/flex/flexbox_direction-column-reverse.htm.png new file mode 100644 index 00000000..20822b7d Binary files /dev/null and b/test/render/flex/flexbox_direction-column-reverse.htm.png differ diff --git a/test/render/flex/flexbox_direction-column.htm b/test/render/flex/flexbox_direction-column.htm new file mode 100644 index 00000000..0e7f5bbf --- /dev/null +++ b/test/render/flex/flexbox_direction-column.htm @@ -0,0 +1,33 @@ + + + +flexbox | flex-direction: column + + + + + +
+ filler + filler + filler + filler +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_direction-column.htm.png b/test/render/flex/flexbox_direction-column.htm.png new file mode 100644 index 00000000..c5462885 Binary files /dev/null and b/test/render/flex/flexbox_direction-column.htm.png differ diff --git a/test/render/flex/flexbox_direction-row-reverse.htm b/test/render/flex/flexbox_direction-row-reverse.htm new file mode 100644 index 00000000..6c52282c --- /dev/null +++ b/test/render/flex/flexbox_direction-row-reverse.htm @@ -0,0 +1,36 @@ + + + +flexbox | flex-direction: row-reverse + + + + + +
    +
  • IJKL
    • +
  • ABCD
    • +
  • EFGH
    • +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_direction-row-reverse.htm.png b/test/render/flex/flexbox_direction-row-reverse.htm.png new file mode 100644 index 00000000..be94316a Binary files /dev/null and b/test/render/flex/flexbox_direction-row-reverse.htm.png differ diff --git a/test/render/flex/flexbox_display.htm b/test/render/flex/flexbox_display.htm new file mode 100644 index 00000000..596654e2 --- /dev/null +++ b/test/render/flex/flexbox_display.htm @@ -0,0 +1,29 @@ + + + +flexbox | display error-handling + + + + + +
    +
  • filler
    • +
  • Antidisestablishmentarianism
    • +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_display.htm.png b/test/render/flex/flexbox_display.htm.png new file mode 100644 index 00000000..140c04c2 Binary files /dev/null and b/test/render/flex/flexbox_display.htm.png differ diff --git a/test/render/flex/flexbox_first-line.htm b/test/render/flex/flexbox_first-line.htm new file mode 100644 index 00000000..72789ace --- /dev/null +++ b/test/render/flex/flexbox_first-line.htm @@ -0,0 +1,40 @@ + + + +flexbox | first-line + + + + + +
    +
  • filler
    • +
  • Antidisestablishmentarianism
    • +
  • filler
    • +
  • Antidisestablishmentarianism
    • +
  • Antidisestablishmentarianism
    • +
  • filler
    • +
  • Antidisestablishmentarianism
    • +
  • filler
    • +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_first-line.htm.png b/test/render/flex/flexbox_first-line.htm.png new file mode 100644 index 00000000..e3315bc9 Binary files /dev/null and b/test/render/flex/flexbox_first-line.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-0-unitless.htm b/test/render/flex/flexbox_flex-0-0-0-unitless.htm new file mode 100644 index 00000000..81355901 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-0-unitless.htm.png b/test/render/flex/flexbox_flex-0-0-0-unitless.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-0.htm b/test/render/flex/flexbox_flex-0-0-0.htm new file mode 100644 index 00000000..58ef4552 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-0.htm.png b/test/render/flex/flexbox_flex-0-0-0.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-1-unitless-basis.htm b/test/render/flex/flexbox_flex-0-0-1-unitless-basis.htm new file mode 100644 index 00000000..319a6f44 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-1-unitless-basis.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 N unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-1-unitless-basis.htm.png b/test/render/flex/flexbox_flex-0-0-1-unitless-basis.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-1-unitless-basis.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-N-shrink.htm b/test/render/flex/flexbox_flex-0-0-N-shrink.htm new file mode 100644 index 00000000..9366af69 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-N-shrink.htm.png b/test/render/flex/flexbox_flex-0-0-N-shrink.htm.png new file mode 100644 index 00000000..bda4a23e Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-N-unitless-basis.htm b/test/render/flex/flexbox_flex-0-0-N-unitless-basis.htm new file mode 100644 index 00000000..f83dcb1d --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-N-unitless-basis.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 N unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-N-unitless-basis.htm.png b/test/render/flex/flexbox_flex-0-0-N-unitless-basis.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-N-unitless-basis.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-N.htm b/test/render/flex/flexbox_flex-0-0-N.htm new file mode 100644 index 00000000..64050ab8 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-N.htm.png b/test/render/flex/flexbox_flex-0-0-N.htm.png new file mode 100644 index 00000000..b45b1723 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-Npercent-shrink.htm b/test/render/flex/flexbox_flex-0-0-Npercent-shrink.htm new file mode 100644 index 00000000..6c0a6721 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-0-0-Npercent-shrink.htm.png new file mode 100644 index 00000000..c37d2519 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-Npercent.htm b/test/render/flex/flexbox_flex-0-0-Npercent.htm new file mode 100644 index 00000000..e820bbe9 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-Npercent.htm.png b/test/render/flex/flexbox_flex-0-0-Npercent.htm.png new file mode 100644 index 00000000..d1eb5dbb Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-auto-shrink.htm b/test/render/flex/flexbox_flex-0-0-auto-shrink.htm new file mode 100644 index 00000000..69b319cf --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-auto-shrink.htm.png b/test/render/flex/flexbox_flex-0-0-auto-shrink.htm.png new file mode 100644 index 00000000..304f96b4 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0-auto.htm b/test/render/flex/flexbox_flex-0-0-auto.htm new file mode 100644 index 00000000..bc167e38 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0-auto.htm.png b/test/render/flex/flexbox_flex-0-0-auto.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-0.htm b/test/render/flex/flexbox_flex-0-0.htm new file mode 100644 index 00000000..55db99b1 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-0.htm.png b/test/render/flex/flexbox_flex-0-0.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-0-unitless.htm b/test/render/flex/flexbox_flex-0-1-0-unitless.htm new file mode 100644 index 00000000..961145f0 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-0-unitless.htm.png b/test/render/flex/flexbox_flex-0-1-0-unitless.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-0.htm b/test/render/flex/flexbox_flex-0-1-0.htm new file mode 100644 index 00000000..c18705cd --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-0.htm.png b/test/render/flex/flexbox_flex-0-1-0.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-1-unitless-basis.htm b/test/render/flex/flexbox_flex-0-1-1-unitless-basis.htm new file mode 100644 index 00000000..d9dfb22d --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-1-unitless-basis.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 1 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-1-unitless-basis.htm.png b/test/render/flex/flexbox_flex-0-1-1-unitless-basis.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-1-unitless-basis.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-N-shrink.htm b/test/render/flex/flexbox_flex-0-1-N-shrink.htm new file mode 100644 index 00000000..f4760902 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-N-shrink.htm.png b/test/render/flex/flexbox_flex-0-1-N-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-N-unitless-basis.htm b/test/render/flex/flexbox_flex-0-1-N-unitless-basis.htm new file mode 100644 index 00000000..25f3bb09 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-N-unitless-basis.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 N unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-N-unitless-basis.htm.png b/test/render/flex/flexbox_flex-0-1-N-unitless-basis.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-N-unitless-basis.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-N.htm b/test/render/flex/flexbox_flex-0-1-N.htm new file mode 100644 index 00000000..9c9280ad --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-N.htm.png b/test/render/flex/flexbox_flex-0-1-N.htm.png new file mode 100644 index 00000000..b45b1723 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-Npercent-shrink.htm b/test/render/flex/flexbox_flex-0-1-Npercent-shrink.htm new file mode 100644 index 00000000..ce5c0d2c --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-0-1-Npercent-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-Npercent.htm b/test/render/flex/flexbox_flex-0-1-Npercent.htm new file mode 100644 index 00000000..fb1fb6ab --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-Npercent.htm.png b/test/render/flex/flexbox_flex-0-1-Npercent.htm.png new file mode 100644 index 00000000..d1eb5dbb Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-auto-shrink.htm b/test/render/flex/flexbox_flex-0-1-auto-shrink.htm new file mode 100644 index 00000000..3d036bac --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-auto-shrink.htm.png b/test/render/flex/flexbox_flex-0-1-auto-shrink.htm.png new file mode 100644 index 00000000..297113b2 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1-auto.htm b/test/render/flex/flexbox_flex-0-1-auto.htm new file mode 100644 index 00000000..e4483cd2 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1-auto.htm.png b/test/render/flex/flexbox_flex-0-1-auto.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-1.htm b/test/render/flex/flexbox_flex-0-1.htm new file mode 100644 index 00000000..6593dde6 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-1.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 1 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-1.htm.png b/test/render/flex/flexbox_flex-0-1.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-1.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-0-unitless.htm b/test/render/flex/flexbox_flex-0-N-0-unitless.htm new file mode 100644 index 00000000..e0037275 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-0-unitless.htm.png b/test/render/flex/flexbox_flex-0-N-0-unitless.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-0.htm b/test/render/flex/flexbox_flex-0-N-0.htm new file mode 100644 index 00000000..dc95168a --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-0.htm.png b/test/render/flex/flexbox_flex-0-N-0.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-N-shrink.htm b/test/render/flex/flexbox_flex-0-N-N-shrink.htm new file mode 100644 index 00000000..1a6a829a --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-N-shrink.htm.png b/test/render/flex/flexbox_flex-0-N-N-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-N.htm b/test/render/flex/flexbox_flex-0-N-N.htm new file mode 100644 index 00000000..2e6ccc57 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-N.htm.png b/test/render/flex/flexbox_flex-0-N-N.htm.png new file mode 100644 index 00000000..b45b1723 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-Npercent-shrink.htm b/test/render/flex/flexbox_flex-0-N-Npercent-shrink.htm new file mode 100644 index 00000000..8341ce32 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-0-N-Npercent-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-Npercent.htm b/test/render/flex/flexbox_flex-0-N-Npercent.htm new file mode 100644 index 00000000..203ecec9 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-Npercent.htm.png b/test/render/flex/flexbox_flex-0-N-Npercent.htm.png new file mode 100644 index 00000000..d1eb5dbb Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-auto-shrink.htm b/test/render/flex/flexbox_flex-0-N-auto-shrink.htm new file mode 100644 index 00000000..3aec8498 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-auto-shrink.htm.png b/test/render/flex/flexbox_flex-0-N-auto-shrink.htm.png new file mode 100644 index 00000000..297113b2 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N-auto.htm b/test/render/flex/flexbox_flex-0-N-auto.htm new file mode 100644 index 00000000..2f1a9338 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N-auto.htm.png b/test/render/flex/flexbox_flex-0-N-auto.htm.png new file mode 100644 index 00000000..ab79088f Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-N.htm b/test/render/flex/flexbox_flex-0-N.htm new file mode 100644 index 00000000..dcc063bc --- /dev/null +++ b/test/render/flex/flexbox_flex-0-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 0 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-N.htm.png b/test/render/flex/flexbox_flex-0-N.htm.png new file mode 100644 index 00000000..2b11d451 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-0-auto.htm b/test/render/flex/flexbox_flex-0-auto.htm new file mode 100644 index 00000000..d7310851 --- /dev/null +++ b/test/render/flex/flexbox_flex-0-auto.htm @@ -0,0 +1,45 @@ + + + +flexbox | flex: 0 auto + + + + + +
+ one + two + three + four +
+ +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-0-auto.htm.png b/test/render/flex/flexbox_flex-0-auto.htm.png new file mode 100644 index 00000000..d4107b04 Binary files /dev/null and b/test/render/flex/flexbox_flex-0-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-0-unitless.htm b/test/render/flex/flexbox_flex-1-0-0-unitless.htm new file mode 100644 index 00000000..de81e61b --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-0-unitless.htm.png b/test/render/flex/flexbox_flex-1-0-0-unitless.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-0.htm b/test/render/flex/flexbox_flex-1-0-0.htm new file mode 100644 index 00000000..92bab58e --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-0.htm.png b/test/render/flex/flexbox_flex-1-0-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-N-shrink.htm b/test/render/flex/flexbox_flex-1-0-N-shrink.htm new file mode 100644 index 00000000..b4b40298 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-N-shrink.htm.png b/test/render/flex/flexbox_flex-1-0-N-shrink.htm.png new file mode 100644 index 00000000..bda4a23e Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-N.htm b/test/render/flex/flexbox_flex-1-0-N.htm new file mode 100644 index 00000000..033638ae --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-N.htm.png b/test/render/flex/flexbox_flex-1-0-N.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-Npercent-shrink.htm b/test/render/flex/flexbox_flex-1-0-Npercent-shrink.htm new file mode 100644 index 00000000..529c49d7 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-1-0-Npercent-shrink.htm.png new file mode 100644 index 00000000..c37d2519 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-Npercent.htm b/test/render/flex/flexbox_flex-1-0-Npercent.htm new file mode 100644 index 00000000..21068eb3 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-Npercent.htm.png b/test/render/flex/flexbox_flex-1-0-Npercent.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-auto-shrink.htm b/test/render/flex/flexbox_flex-1-0-auto-shrink.htm new file mode 100644 index 00000000..9ca1411b --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-auto-shrink.htm.png b/test/render/flex/flexbox_flex-1-0-auto-shrink.htm.png new file mode 100644 index 00000000..304f96b4 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0-auto.htm b/test/render/flex/flexbox_flex-1-0-auto.htm new file mode 100644 index 00000000..ab966c68 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0-auto.htm.png b/test/render/flex/flexbox_flex-1-0-auto.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-0.htm b/test/render/flex/flexbox_flex-1-0.htm new file mode 100644 index 00000000..996a9b7f --- /dev/null +++ b/test/render/flex/flexbox_flex-1-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-0.htm.png b/test/render/flex/flexbox_flex-1-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-0-unitless.htm b/test/render/flex/flexbox_flex-1-1-0-unitless.htm new file mode 100644 index 00000000..c949b0bf --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-0-unitless.htm.png b/test/render/flex/flexbox_flex-1-1-0-unitless.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-0.htm b/test/render/flex/flexbox_flex-1-1-0.htm new file mode 100644 index 00000000..c7c1aa59 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-0.htm.png b/test/render/flex/flexbox_flex-1-1-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-N-shrink.htm b/test/render/flex/flexbox_flex-1-1-N-shrink.htm new file mode 100644 index 00000000..190fa011 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-N-shrink.htm.png b/test/render/flex/flexbox_flex-1-1-N-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-N.htm b/test/render/flex/flexbox_flex-1-1-N.htm new file mode 100644 index 00000000..5f85c54a --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-N.htm.png b/test/render/flex/flexbox_flex-1-1-N.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-Npercent-shrink.htm b/test/render/flex/flexbox_flex-1-1-Npercent-shrink.htm new file mode 100644 index 00000000..ba1ebf0f --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-1-1-Npercent-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-Npercent.htm b/test/render/flex/flexbox_flex-1-1-Npercent.htm new file mode 100644 index 00000000..ab07ea32 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-Npercent.htm.png b/test/render/flex/flexbox_flex-1-1-Npercent.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-auto-shrink.htm b/test/render/flex/flexbox_flex-1-1-auto-shrink.htm new file mode 100644 index 00000000..22bddfe6 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-auto-shrink.htm.png b/test/render/flex/flexbox_flex-1-1-auto-shrink.htm.png new file mode 100644 index 00000000..297113b2 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1-auto.htm b/test/render/flex/flexbox_flex-1-1-auto.htm new file mode 100644 index 00000000..6e5500fb --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1-auto.htm.png b/test/render/flex/flexbox_flex-1-1-auto.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-1.htm b/test/render/flex/flexbox_flex-1-1.htm new file mode 100644 index 00000000..89fd32ce --- /dev/null +++ b/test/render/flex/flexbox_flex-1-1.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 1 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-1.htm.png b/test/render/flex/flexbox_flex-1-1.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-1.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-0-unitless.htm b/test/render/flex/flexbox_flex-1-N-0-unitless.htm new file mode 100644 index 00000000..206b9c49 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-0-unitless.htm.png b/test/render/flex/flexbox_flex-1-N-0-unitless.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-0.htm b/test/render/flex/flexbox_flex-1-N-0.htm new file mode 100644 index 00000000..cfa10fda --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-0.htm.png b/test/render/flex/flexbox_flex-1-N-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-N-shrink.htm b/test/render/flex/flexbox_flex-1-N-N-shrink.htm new file mode 100644 index 00000000..5c0b3e50 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-N-shrink.htm.png b/test/render/flex/flexbox_flex-1-N-N-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-N.htm b/test/render/flex/flexbox_flex-1-N-N.htm new file mode 100644 index 00000000..1bdef9f5 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-N.htm.png b/test/render/flex/flexbox_flex-1-N-N.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-Npercent-shrink.htm b/test/render/flex/flexbox_flex-1-N-Npercent-shrink.htm new file mode 100644 index 00000000..a6c8ef46 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-1-N-Npercent-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-Npercent.htm b/test/render/flex/flexbox_flex-1-N-Npercent.htm new file mode 100644 index 00000000..e7315b6c --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-Npercent.htm.png b/test/render/flex/flexbox_flex-1-N-Npercent.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-auto-shrink.htm b/test/render/flex/flexbox_flex-1-N-auto-shrink.htm new file mode 100644 index 00000000..bd2c4b00 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-auto-shrink.htm.png b/test/render/flex/flexbox_flex-1-N-auto-shrink.htm.png new file mode 100644 index 00000000..297113b2 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N-auto.htm b/test/render/flex/flexbox_flex-1-N-auto.htm new file mode 100644 index 00000000..2f0f6280 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N-auto.htm.png b/test/render/flex/flexbox_flex-1-N-auto.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-1-N.htm b/test/render/flex/flexbox_flex-1-N.htm new file mode 100644 index 00000000..b71a7844 --- /dev/null +++ b/test/render/flex/flexbox_flex-1-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: 1 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-1-N.htm.png b/test/render/flex/flexbox_flex-1-N.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-1-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-0-unitless.htm b/test/render/flex/flexbox_flex-N-0-0-unitless.htm new file mode 100644 index 00000000..44e396dd --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-0-unitless.htm.png b/test/render/flex/flexbox_flex-N-0-0-unitless.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-0.htm b/test/render/flex/flexbox_flex-N-0-0.htm new file mode 100644 index 00000000..5bafb73b --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-0.htm.png b/test/render/flex/flexbox_flex-N-0-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-N-shrink.htm b/test/render/flex/flexbox_flex-N-0-N-shrink.htm new file mode 100644 index 00000000..d5b521ea --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-N-shrink.htm.png b/test/render/flex/flexbox_flex-N-0-N-shrink.htm.png new file mode 100644 index 00000000..bda4a23e Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-N.htm b/test/render/flex/flexbox_flex-N-0-N.htm new file mode 100644 index 00000000..79b20dcc --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-N.htm.png b/test/render/flex/flexbox_flex-N-0-N.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-Npercent-shrink.htm b/test/render/flex/flexbox_flex-N-0-Npercent-shrink.htm new file mode 100644 index 00000000..83d4efe0 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-N-0-Npercent-shrink.htm.png new file mode 100644 index 00000000..c37d2519 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-Npercent.htm b/test/render/flex/flexbox_flex-N-0-Npercent.htm new file mode 100644 index 00000000..ba1ee80d --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-Npercent.htm.png b/test/render/flex/flexbox_flex-N-0-Npercent.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-auto-shrink.htm b/test/render/flex/flexbox_flex-N-0-auto-shrink.htm new file mode 100644 index 00000000..d6e2e316 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-auto-shrink.htm.png b/test/render/flex/flexbox_flex-N-0-auto-shrink.htm.png new file mode 100644 index 00000000..2ba886ed Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0-auto.htm b/test/render/flex/flexbox_flex-N-0-auto.htm new file mode 100644 index 00000000..bf9fb04a --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0-auto.htm.png b/test/render/flex/flexbox_flex-N-0-auto.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-0.htm b/test/render/flex/flexbox_flex-N-0.htm new file mode 100644 index 00000000..71e7d40c --- /dev/null +++ b/test/render/flex/flexbox_flex-N-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-0.htm.png b/test/render/flex/flexbox_flex-N-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-0-unitless.htm b/test/render/flex/flexbox_flex-N-1-0-unitless.htm new file mode 100644 index 00000000..8db84006 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-0-unitless.htm.png b/test/render/flex/flexbox_flex-N-1-0-unitless.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-0.htm b/test/render/flex/flexbox_flex-N-1-0.htm new file mode 100644 index 00000000..c21c35d9 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-0.htm.png b/test/render/flex/flexbox_flex-N-1-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-N-shrink.htm b/test/render/flex/flexbox_flex-N-1-N-shrink.htm new file mode 100644 index 00000000..d6b4b007 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-N-shrink.htm.png b/test/render/flex/flexbox_flex-N-1-N-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-N.htm b/test/render/flex/flexbox_flex-N-1-N.htm new file mode 100644 index 00000000..9b6fc893 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-N.htm.png b/test/render/flex/flexbox_flex-N-1-N.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-Npercent-shrink.htm b/test/render/flex/flexbox_flex-N-1-Npercent-shrink.htm new file mode 100644 index 00000000..333bd481 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-N-1-Npercent-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-Npercent.htm b/test/render/flex/flexbox_flex-N-1-Npercent.htm new file mode 100644 index 00000000..b2f5e954 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-Npercent.htm.png b/test/render/flex/flexbox_flex-N-1-Npercent.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-auto-shrink.htm b/test/render/flex/flexbox_flex-N-1-auto-shrink.htm new file mode 100644 index 00000000..7ced2318 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-auto-shrink.htm.png b/test/render/flex/flexbox_flex-N-1-auto-shrink.htm.png new file mode 100644 index 00000000..297113b2 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1-auto.htm b/test/render/flex/flexbox_flex-N-1-auto.htm new file mode 100644 index 00000000..7ed3906d --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1-auto.htm.png b/test/render/flex/flexbox_flex-N-1-auto.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-1.htm b/test/render/flex/flexbox_flex-N-1.htm new file mode 100644 index 00000000..d49d01cb --- /dev/null +++ b/test/render/flex/flexbox_flex-N-1.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N 1 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-1.htm.png b/test/render/flex/flexbox_flex-N-1.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-1.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-0-unitless.htm b/test/render/flex/flexbox_flex-N-N-0-unitless.htm new file mode 100644 index 00000000..de5b00aa --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-0-unitless.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N 0 unitless + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-0-unitless.htm.png b/test/render/flex/flexbox_flex-N-N-0-unitless.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-0-unitless.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-0.htm b/test/render/flex/flexbox_flex-N-N-0.htm new file mode 100644 index 00000000..b4f5c7e4 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-0.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N 0 + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-0.htm.png b/test/render/flex/flexbox_flex-N-N-0.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-0.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-N-shrink.htm b/test/render/flex/flexbox_flex-N-N-N-shrink.htm new file mode 100644 index 00000000..37fdc2e0 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-N-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N N | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-N-shrink.htm.png b/test/render/flex/flexbox_flex-N-N-N-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-N-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-N.htm b/test/render/flex/flexbox_flex-N-N-N.htm new file mode 100644 index 00000000..a78dc76f --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-N.htm.png b/test/render/flex/flexbox_flex-N-N-N.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-Npercent-shrink.htm b/test/render/flex/flexbox_flex-N-N-Npercent-shrink.htm new file mode 100644 index 00000000..ce213915 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-Npercent-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N N% | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-Npercent-shrink.htm.png b/test/render/flex/flexbox_flex-N-N-Npercent-shrink.htm.png new file mode 100644 index 00000000..0f46f7c7 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-Npercent-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-Npercent.htm b/test/render/flex/flexbox_flex-N-N-Npercent.htm new file mode 100644 index 00000000..61eaa98c --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-Npercent.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N N% + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-Npercent.htm.png b/test/render/flex/flexbox_flex-N-N-Npercent.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-Npercent.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-auto-shrink.htm b/test/render/flex/flexbox_flex-N-N-auto-shrink.htm new file mode 100644 index 00000000..eb8660de --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-auto-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N auto | shrinking + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-auto-shrink.htm.png b/test/render/flex/flexbox_flex-N-N-auto-shrink.htm.png new file mode 100644 index 00000000..297113b2 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-auto-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N-auto.htm b/test/render/flex/flexbox_flex-N-N-auto.htm new file mode 100644 index 00000000..86664de2 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N-auto.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N auto + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N-auto.htm.png b/test/render/flex/flexbox_flex-N-N-auto.htm.png new file mode 100644 index 00000000..8c69849c Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-N-N.htm b/test/render/flex/flexbox_flex-N-N.htm new file mode 100644 index 00000000..ff313304 --- /dev/null +++ b/test/render/flex/flexbox_flex-N-N.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex: N N + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-N-N.htm.png b/test/render/flex/flexbox_flex-N-N.htm.png new file mode 100644 index 00000000..8cf2cda9 Binary files /dev/null and b/test/render/flex/flexbox_flex-N-N.htm.png differ diff --git a/test/render/flex/flexbox_flex-auto.htm b/test/render/flex/flexbox_flex-auto.htm new file mode 100644 index 00000000..88216df1 --- /dev/null +++ b/test/render/flex/flexbox_flex-auto.htm @@ -0,0 +1,46 @@ + + + +flexbox | flex: auto + + + + + +
+ one + two + three + four +
+ +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-auto.htm.png b/test/render/flex/flexbox_flex-auto.htm.png new file mode 100644 index 00000000..a15159b5 Binary files /dev/null and b/test/render/flex/flexbox_flex-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-basis-shrink.htm b/test/render/flex/flexbox_flex-basis-shrink.htm new file mode 100644 index 00000000..bf101f0c --- /dev/null +++ b/test/render/flex/flexbox_flex-basis-shrink.htm @@ -0,0 +1,40 @@ + + + +flexbox | flex-basis: percentage, flex-shrink: +integer + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-basis-shrink.htm.png b/test/render/flex/flexbox_flex-basis-shrink.htm.png new file mode 100644 index 00000000..957ada77 Binary files /dev/null and b/test/render/flex/flexbox_flex-basis-shrink.htm.png differ diff --git a/test/render/flex/flexbox_flex-basis.htm b/test/render/flex/flexbox_flex-basis.htm new file mode 100644 index 00000000..fc6dc120 --- /dev/null +++ b/test/render/flex/flexbox_flex-basis.htm @@ -0,0 +1,42 @@ + + + +flexbox | flex-basis: percentage + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-basis.htm.png b/test/render/flex/flexbox_flex-basis.htm.png new file mode 100644 index 00000000..40e9e1b5 Binary files /dev/null and b/test/render/flex/flexbox_flex-basis.htm.png differ diff --git a/test/render/flex/flexbox_flex-initial-2.htm b/test/render/flex/flexbox_flex-initial-2.htm new file mode 100644 index 00000000..02acae5a --- /dev/null +++ b/test/render/flex/flexbox_flex-initial-2.htm @@ -0,0 +1,45 @@ + + + +flexbox | flex: initial + + + + + +
+ one + two + three + four +
+ +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-initial-2.htm.png b/test/render/flex/flexbox_flex-initial-2.htm.png new file mode 100644 index 00000000..c487b725 Binary files /dev/null and b/test/render/flex/flexbox_flex-initial-2.htm.png differ diff --git a/test/render/flex/flexbox_flex-initial.htm b/test/render/flex/flexbox_flex-initial.htm new file mode 100644 index 00000000..e8ae362a --- /dev/null +++ b/test/render/flex/flexbox_flex-initial.htm @@ -0,0 +1,45 @@ + + + +flexbox | flex: initial + + + + + +
+ one + two + three + four +
+ +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-initial.htm.png b/test/render/flex/flexbox_flex-initial.htm.png new file mode 100644 index 00000000..d4107b04 Binary files /dev/null and b/test/render/flex/flexbox_flex-initial.htm.png differ diff --git a/test/render/flex/flexbox_flex-natural-mixed-basis-auto.htm b/test/render/flex/flexbox_flex-natural-mixed-basis-auto.htm new file mode 100644 index 00000000..c81c8b50 --- /dev/null +++ b/test/render/flex/flexbox_flex-natural-mixed-basis-auto.htm @@ -0,0 +1,42 @@ + + + +flexbox | flex: larger integer, mixed basis, auto + + + + + + + +
+ a + aaa + aaaaa + aaaaaaaaaaaaaaa +
+ + + diff --git a/test/render/flex/flexbox_flex-natural-mixed-basis-auto.htm.png b/test/render/flex/flexbox_flex-natural-mixed-basis-auto.htm.png new file mode 100644 index 00000000..d2885371 Binary files /dev/null and b/test/render/flex/flexbox_flex-natural-mixed-basis-auto.htm.png differ diff --git a/test/render/flex/flexbox_flex-natural-variable-auto-basis.htm b/test/render/flex/flexbox_flex-natural-variable-auto-basis.htm new file mode 100644 index 00000000..440ee8e4 --- /dev/null +++ b/test/render/flex/flexbox_flex-natural-variable-auto-basis.htm @@ -0,0 +1,39 @@ + + + +flexbox | flex: larger integer, auto basis + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-natural-variable-auto-basis.htm.png b/test/render/flex/flexbox_flex-natural-variable-auto-basis.htm.png new file mode 100644 index 00000000..b307e753 Binary files /dev/null and b/test/render/flex/flexbox_flex-natural-variable-auto-basis.htm.png differ diff --git a/test/render/flex/flexbox_flex-natural.htm b/test/render/flex/flexbox_flex-natural.htm new file mode 100644 index 00000000..4d566bab --- /dev/null +++ b/test/render/flex/flexbox_flex-natural.htm @@ -0,0 +1,50 @@ + + + +flexbox | flex: larger integer + + + + + +
+ one + two + three + four +
+ +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-natural.htm.png b/test/render/flex/flexbox_flex-natural.htm.png new file mode 100644 index 00000000..5c99cad5 Binary files /dev/null and b/test/render/flex/flexbox_flex-natural.htm.png differ diff --git a/test/render/flex/flexbox_flex-none.htm b/test/render/flex/flexbox_flex-none.htm new file mode 100644 index 00000000..edc748d9 --- /dev/null +++ b/test/render/flex/flexbox_flex-none.htm @@ -0,0 +1,46 @@ + + + +flexbox | flex: none + + + + + +
+ one + two + three + four +
+ +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flex-none.htm.png b/test/render/flex/flexbox_flex-none.htm.png new file mode 100644 index 00000000..e0990312 Binary files /dev/null and b/test/render/flex/flexbox_flex-none.htm.png differ diff --git a/test/render/flex/flexbox_flow-column-reverse-wrap-reverse.htm b/test/render/flex/flexbox_flow-column-reverse-wrap-reverse.htm new file mode 100644 index 00000000..0774e802 --- /dev/null +++ b/test/render/flex/flexbox_flow-column-reverse-wrap-reverse.htm @@ -0,0 +1,36 @@ + + + +flexbox | flex-flow: column-reverse wrap-reverse + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flow-column-reverse-wrap-reverse.htm.png b/test/render/flex/flexbox_flow-column-reverse-wrap-reverse.htm.png new file mode 100644 index 00000000..c9b70aee Binary files /dev/null and b/test/render/flex/flexbox_flow-column-reverse-wrap-reverse.htm.png differ diff --git a/test/render/flex/flexbox_flow-column-reverse-wrap.htm b/test/render/flex/flexbox_flow-column-reverse-wrap.htm new file mode 100644 index 00000000..e3b631fb --- /dev/null +++ b/test/render/flex/flexbox_flow-column-reverse-wrap.htm @@ -0,0 +1,36 @@ + + + +flexbox | flex-flow: column-reverse wrap + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flow-column-reverse-wrap.htm.png b/test/render/flex/flexbox_flow-column-reverse-wrap.htm.png new file mode 100644 index 00000000..572dd56c Binary files /dev/null and b/test/render/flex/flexbox_flow-column-reverse-wrap.htm.png differ diff --git a/test/render/flex/flexbox_flow-column-wrap-reverse.htm b/test/render/flex/flexbox_flow-column-wrap-reverse.htm new file mode 100644 index 00000000..29dd65fc --- /dev/null +++ b/test/render/flex/flexbox_flow-column-wrap-reverse.htm @@ -0,0 +1,35 @@ + + + +flexbox | flex-flow: column wrap-reverse + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flow-column-wrap-reverse.htm.png b/test/render/flex/flexbox_flow-column-wrap-reverse.htm.png new file mode 100644 index 00000000..e3b1b681 Binary files /dev/null and b/test/render/flex/flexbox_flow-column-wrap-reverse.htm.png differ diff --git a/test/render/flex/flexbox_flow-column-wrap.htm b/test/render/flex/flexbox_flow-column-wrap.htm new file mode 100644 index 00000000..33dfe03b --- /dev/null +++ b/test/render/flex/flexbox_flow-column-wrap.htm @@ -0,0 +1,35 @@ + + + +flexbox | flex-flow: column wrap + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flow-column-wrap.htm.png b/test/render/flex/flexbox_flow-column-wrap.htm.png new file mode 100644 index 00000000..75b3343f Binary files /dev/null and b/test/render/flex/flexbox_flow-column-wrap.htm.png differ diff --git a/test/render/flex/flexbox_flow-row-wrap-reverse.htm b/test/render/flex/flexbox_flow-row-wrap-reverse.htm new file mode 100644 index 00000000..6fc984c0 --- /dev/null +++ b/test/render/flex/flexbox_flow-row-wrap-reverse.htm @@ -0,0 +1,34 @@ + + + +flexbox | flex-flow: row wrap-reverse + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flow-row-wrap-reverse.htm.png b/test/render/flex/flexbox_flow-row-wrap-reverse.htm.png new file mode 100644 index 00000000..1a181cd7 Binary files /dev/null and b/test/render/flex/flexbox_flow-row-wrap-reverse.htm.png differ diff --git a/test/render/flex/flexbox_flow-row-wrap.htm b/test/render/flex/flexbox_flow-row-wrap.htm new file mode 100644 index 00000000..880ed3d7 --- /dev/null +++ b/test/render/flex/flexbox_flow-row-wrap.htm @@ -0,0 +1,34 @@ + + + +flexbox | flex-flow: row wrap + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_flow-row-wrap.htm.png b/test/render/flex/flexbox_flow-row-wrap.htm.png new file mode 100644 index 00000000..303d3169 Binary files /dev/null and b/test/render/flex/flexbox_flow-row-wrap.htm.png differ diff --git a/test/render/flex/flexbox_generated-flex.htm b/test/render/flex/flexbox_generated-flex.htm new file mode 100644 index 00000000..264be7f8 --- /dev/null +++ b/test/render/flex/flexbox_generated-flex.htm @@ -0,0 +1,27 @@ + + + +flexbox | flexcontainer via generated content + + + + + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_generated-flex.htm.png b/test/render/flex/flexbox_generated-flex.htm.png new file mode 100644 index 00000000..3466de6b Binary files /dev/null and b/test/render/flex/flexbox_generated-flex.htm.png differ diff --git a/test/render/flex/flexbox_generated-nested-flex.htm b/test/render/flex/flexbox_generated-nested-flex.htm new file mode 100644 index 00000000..48fc8c57 --- /dev/null +++ b/test/render/flex/flexbox_generated-nested-flex.htm @@ -0,0 +1,27 @@ + + + +flexbox | flexcontainer via generated content + + + + + +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_generated-nested-flex.htm.png b/test/render/flex/flexbox_generated-nested-flex.htm.png new file mode 100644 index 00000000..3466de6b Binary files /dev/null and b/test/render/flex/flexbox_generated-nested-flex.htm.png differ diff --git a/test/render/flex/flexbox_generated.htm b/test/render/flex/flexbox_generated.htm new file mode 100644 index 00000000..53285a07 --- /dev/null +++ b/test/render/flex/flexbox_generated.htm @@ -0,0 +1,32 @@ + + + +flexbox | flexcontainer vs generated content + + + + + +
+

FAIL

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_generated.htm.png b/test/render/flex/flexbox_generated.htm.png new file mode 100644 index 00000000..ce63e0a9 Binary files /dev/null and b/test/render/flex/flexbox_generated.htm.png differ diff --git a/test/render/flex/flexbox_item-bottom-float.htm b/test/render/flex/flexbox_item-bottom-float.htm new file mode 100644 index 00000000..82110247 --- /dev/null +++ b/test/render/flex/flexbox_item-bottom-float.htm @@ -0,0 +1,34 @@ + + + +flexbox | GCPM bottom float + + + + + +
+

+

+

+

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_item-bottom-float.htm.png b/test/render/flex/flexbox_item-bottom-float.htm.png new file mode 100644 index 00000000..bc7d80a9 Binary files /dev/null and b/test/render/flex/flexbox_item-bottom-float.htm.png differ diff --git a/test/render/flex/flexbox_item-clear.htm b/test/render/flex/flexbox_item-clear.htm new file mode 100644 index 00000000..a5e65524 --- /dev/null +++ b/test/render/flex/flexbox_item-clear.htm @@ -0,0 +1,34 @@ + + + +flexbox | cleared item + + + + + +
filler
+ +
+
Yellow box should be to the right of the blue box, and + never below
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_item-clear.htm.png b/test/render/flex/flexbox_item-clear.htm.png new file mode 100644 index 00000000..7f8e75d7 Binary files /dev/null and b/test/render/flex/flexbox_item-clear.htm.png differ diff --git a/test/render/flex/flexbox_item-float.htm b/test/render/flex/flexbox_item-float.htm new file mode 100644 index 00000000..ce7622dc --- /dev/null +++ b/test/render/flex/flexbox_item-float.htm @@ -0,0 +1,32 @@ + + + +flexbox | floated item + + + + + +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_item-float.htm.png b/test/render/flex/flexbox_item-float.htm.png new file mode 100644 index 00000000..71a3008f Binary files /dev/null and b/test/render/flex/flexbox_item-float.htm.png differ diff --git a/test/render/flex/flexbox_item-top-float.htm b/test/render/flex/flexbox_item-top-float.htm new file mode 100644 index 00000000..16bea62c --- /dev/null +++ b/test/render/flex/flexbox_item-top-float.htm @@ -0,0 +1,33 @@ + + + +flexbox | floated item + + + + + +
+

+

+

+

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_item-top-float.htm.png b/test/render/flex/flexbox_item-top-float.htm.png new file mode 100644 index 00000000..bc7d80a9 Binary files /dev/null and b/test/render/flex/flexbox_item-top-float.htm.png differ diff --git a/test/render/flex/flexbox_item-vertical-align.htm b/test/render/flex/flexbox_item-vertical-align.htm new file mode 100644 index 00000000..ae67ee9d --- /dev/null +++ b/test/render/flex/flexbox_item-vertical-align.htm @@ -0,0 +1,38 @@ + + + +flexbox | vertical-align + + + + + +
+

+

+

+

+

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_item-vertical-align.htm.png b/test/render/flex/flexbox_item-vertical-align.htm.png new file mode 100644 index 00000000..62a6f301 Binary files /dev/null and b/test/render/flex/flexbox_item-vertical-align.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-center.htm b/test/render/flex/flexbox_justifycontent-center.htm new file mode 100644 index 00000000..d7ed4cae --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-center.htm @@ -0,0 +1,40 @@ + + + +flexbox | justify-content: center + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-center.htm.png b/test/render/flex/flexbox_justifycontent-center.htm.png new file mode 100644 index 00000000..c2731d3c Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-center.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-flex-end.htm b/test/render/flex/flexbox_justifycontent-flex-end.htm new file mode 100644 index 00000000..0291d8c1 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-flex-end.htm @@ -0,0 +1,40 @@ + + + +flexbox | justify-content: flex-end + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-flex-end.htm.png b/test/render/flex/flexbox_justifycontent-flex-end.htm.png new file mode 100644 index 00000000..cd44e7c3 Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-flex-end.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-flex-start.htm b/test/render/flex/flexbox_justifycontent-flex-start.htm new file mode 100644 index 00000000..0137f543 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-flex-start.htm @@ -0,0 +1,40 @@ + + + +flexbox | justify-content: flex-start + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-flex-start.htm.png b/test/render/flex/flexbox_justifycontent-flex-start.htm.png new file mode 100644 index 00000000..f45f26eb Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-flex-start.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-spacearound-negative.htm b/test/render/flex/flexbox_justifycontent-spacearound-negative.htm new file mode 100644 index 00000000..e7f8444b --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-spacearound-negative.htm @@ -0,0 +1,39 @@ + + + +flexbox | justify-content: space-around / negative + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-spacearound-negative.htm.png b/test/render/flex/flexbox_justifycontent-spacearound-negative.htm.png new file mode 100644 index 00000000..44e7ae5c Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-spacearound-negative.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-spacearound-only.htm b/test/render/flex/flexbox_justifycontent-spacearound-only.htm new file mode 100644 index 00000000..89eb31c7 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-spacearound-only.htm @@ -0,0 +1,35 @@ + + + +flexbox | justify-content: space-around | single item + + + + + +
+ one +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-spacearound-only.htm.png b/test/render/flex/flexbox_justifycontent-spacearound-only.htm.png new file mode 100644 index 00000000..f4897867 Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-spacearound-only.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-spacearound.htm b/test/render/flex/flexbox_justifycontent-spacearound.htm new file mode 100644 index 00000000..0fb85386 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-spacearound.htm @@ -0,0 +1,40 @@ + + + +flexbox | justify-content: space-around + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-spacearound.htm.png b/test/render/flex/flexbox_justifycontent-spacearound.htm.png new file mode 100644 index 00000000..f45f26eb Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-spacearound.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-spacebetween-negative.htm b/test/render/flex/flexbox_justifycontent-spacebetween-negative.htm new file mode 100644 index 00000000..6e431f65 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-spacebetween-negative.htm @@ -0,0 +1,39 @@ + + + +flexbox | justify-content: space-between / negative + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-spacebetween-negative.htm.png b/test/render/flex/flexbox_justifycontent-spacebetween-negative.htm.png new file mode 100644 index 00000000..d98579cf Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-spacebetween-negative.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-spacebetween-only.htm b/test/render/flex/flexbox_justifycontent-spacebetween-only.htm new file mode 100644 index 00000000..812a6a00 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-spacebetween-only.htm @@ -0,0 +1,35 @@ + + + +flexbox | justify-content: space-between | single item + + + + + +
+ one +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-spacebetween-only.htm.png b/test/render/flex/flexbox_justifycontent-spacebetween-only.htm.png new file mode 100644 index 00000000..9b8fa533 Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-spacebetween-only.htm.png differ diff --git a/test/render/flex/flexbox_justifycontent-spacebetween.htm b/test/render/flex/flexbox_justifycontent-spacebetween.htm new file mode 100644 index 00000000..c8e00a38 --- /dev/null +++ b/test/render/flex/flexbox_justifycontent-spacebetween.htm @@ -0,0 +1,40 @@ + + + +flexbox | justify-content: space-between + + + + + +
+ one + two + three +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_justifycontent-spacebetween.htm.png b/test/render/flex/flexbox_justifycontent-spacebetween.htm.png new file mode 100644 index 00000000..f03ac862 Binary files /dev/null and b/test/render/flex/flexbox_justifycontent-spacebetween.htm.png differ diff --git a/test/render/flex/flexbox_margin-auto-overflow.htm b/test/render/flex/flexbox_margin-auto-overflow.htm new file mode 100644 index 00000000..f8bbe7b4 --- /dev/null +++ b/test/render/flex/flexbox_margin-auto-overflow.htm @@ -0,0 +1,35 @@ + + + +flexbox | margin: auto in overflow + + + + + +
+ one + two +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_margin-auto-overflow.htm.png b/test/render/flex/flexbox_margin-auto-overflow.htm.png new file mode 100644 index 00000000..33425b1c Binary files /dev/null and b/test/render/flex/flexbox_margin-auto-overflow.htm.png differ diff --git a/test/render/flex/flexbox_margin-auto.htm b/test/render/flex/flexbox_margin-auto.htm new file mode 100644 index 00000000..3f49cacf --- /dev/null +++ b/test/render/flex/flexbox_margin-auto.htm @@ -0,0 +1,33 @@ + + + +flexbox | margin: auto + + + + + +
+ one + two +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_margin-auto.htm.png b/test/render/flex/flexbox_margin-auto.htm.png new file mode 100644 index 00000000..86c0cafd Binary files /dev/null and b/test/render/flex/flexbox_margin-auto.htm.png differ diff --git a/test/render/flex/flexbox_margin-left-ex.htm b/test/render/flex/flexbox_margin-left-ex.htm new file mode 100644 index 00000000..ebe7e1c5 --- /dev/null +++ b/test/render/flex/flexbox_margin-left-ex.htm @@ -0,0 +1,33 @@ + + + +flexbox | margin-left: auto + + + + + +
+ onetwothreefour
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_margin-left-ex.htm.png b/test/render/flex/flexbox_margin-left-ex.htm.png new file mode 100644 index 00000000..a192788d Binary files /dev/null and b/test/render/flex/flexbox_margin-left-ex.htm.png differ diff --git a/test/render/flex/flexbox_margin.htm b/test/render/flex/flexbox_margin.htm new file mode 100644 index 00000000..f5dbba6d --- /dev/null +++ b/test/render/flex/flexbox_margin.htm @@ -0,0 +1,22 @@ + + + +flexbox | margins + + + + + +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_margin.htm.png b/test/render/flex/flexbox_margin.htm.png new file mode 100644 index 00000000..b9d24bbb Binary files /dev/null and b/test/render/flex/flexbox_margin.htm.png differ diff --git a/test/render/flex/flexbox_nested-flex.htm b/test/render/flex/flexbox_nested-flex.htm new file mode 100644 index 00000000..23109575 --- /dev/null +++ b/test/render/flex/flexbox_nested-flex.htm @@ -0,0 +1,28 @@ + + + +flexbox | nested flexcontainer + + + + + +
+

xxx

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_nested-flex.htm.png b/test/render/flex/flexbox_nested-flex.htm.png new file mode 100644 index 00000000..3466de6b Binary files /dev/null and b/test/render/flex/flexbox_nested-flex.htm.png differ diff --git a/test/render/flex/flexbox_object.htm b/test/render/flex/flexbox_object.htm new file mode 100644 index 00000000..3f745c30 --- /dev/null +++ b/test/render/flex/flexbox_object.htm @@ -0,0 +1,26 @@ + + + +flexbox | object fallback as a flex item + + + + + +
+ this is supposed to be a flex item +

this is supposed to be a flex item

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_object.htm.png b/test/render/flex/flexbox_object.htm.png new file mode 100644 index 00000000..cee494f6 Binary files /dev/null and b/test/render/flex/flexbox_object.htm.png differ diff --git a/test/render/flex/flexbox_order-box.htm b/test/render/flex/flexbox_order-box.htm new file mode 100644 index 00000000..a92c18e4 --- /dev/null +++ b/test/render/flex/flexbox_order-box.htm @@ -0,0 +1,43 @@ + + + +flexbox | flex-flow: column-reverse wrap-reverse; order + + + + + +
+
+ one + two +
+ +
+ three + four +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_order-box.htm.png b/test/render/flex/flexbox_order-box.htm.png new file mode 100644 index 00000000..eb2a5e2f Binary files /dev/null and b/test/render/flex/flexbox_order-box.htm.png differ diff --git a/test/render/flex/flexbox_order-noninteger-invalid.htm b/test/render/flex/flexbox_order-noninteger-invalid.htm new file mode 100644 index 00000000..2c4eb9b4 --- /dev/null +++ b/test/render/flex/flexbox_order-noninteger-invalid.htm @@ -0,0 +1,44 @@ + + + +flexbox | flex-flow: column-reverse wrap-reverse; order + + + + + + +
+ + +
+ +

+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_order-noninteger-invalid.htm.png b/test/render/flex/flexbox_order-noninteger-invalid.htm.png new file mode 100644 index 00000000..a7668522 Binary files /dev/null and b/test/render/flex/flexbox_order-noninteger-invalid.htm.png differ diff --git a/test/render/flex/flexbox_order.htm b/test/render/flex/flexbox_order.htm new file mode 100644 index 00000000..f0948e8e --- /dev/null +++ b/test/render/flex/flexbox_order.htm @@ -0,0 +1,54 @@ + + + +flexbox | flex-flow: column-reverse wrap-reverse; order + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_order.htm.png b/test/render/flex/flexbox_order.htm.png new file mode 100644 index 00000000..b043d02f Binary files /dev/null and b/test/render/flex/flexbox_order.htm.png differ diff --git a/test/render/flex/flexbox_stf-abspos.htm b/test/render/flex/flexbox_stf-abspos.htm new file mode 100644 index 00000000..40230b8f --- /dev/null +++ b/test/render/flex/flexbox_stf-abspos.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: abspos + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-abspos.htm.png b/test/render/flex/flexbox_stf-abspos.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-abspos.htm.png differ diff --git a/test/render/flex/flexbox_stf-fixpos.htm b/test/render/flex/flexbox_stf-fixpos.htm new file mode 100644 index 00000000..0666fca8 --- /dev/null +++ b/test/render/flex/flexbox_stf-fixpos.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: fixed + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-fixpos.htm.png b/test/render/flex/flexbox_stf-fixpos.htm.png new file mode 100644 index 00000000..0a2c6183 Binary files /dev/null and b/test/render/flex/flexbox_stf-fixpos.htm.png differ diff --git a/test/render/flex/flexbox_stf-float.htm b/test/render/flex/flexbox_stf-float.htm new file mode 100644 index 00000000..a5e3429d --- /dev/null +++ b/test/render/flex/flexbox_stf-float.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: float + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-float.htm.png b/test/render/flex/flexbox_stf-float.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-float.htm.png differ diff --git a/test/render/flex/flexbox_stf-inline-block.htm b/test/render/flex/flexbox_stf-inline-block.htm new file mode 100644 index 00000000..147bb4ce --- /dev/null +++ b/test/render/flex/flexbox_stf-inline-block.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: inline-block + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-inline-block.htm.png b/test/render/flex/flexbox_stf-inline-block.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-inline-block.htm.png differ diff --git a/test/render/flex/flexbox_stf-table-caption.htm b/test/render/flex/flexbox_stf-table-caption.htm new file mode 100644 index 00000000..b150c00c --- /dev/null +++ b/test/render/flex/flexbox_stf-table-caption.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: table-caption + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-table-caption.htm.png b/test/render/flex/flexbox_stf-table-caption.htm.png new file mode 100644 index 00000000..19332923 Binary files /dev/null and b/test/render/flex/flexbox_stf-table-caption.htm.png differ diff --git a/test/render/flex/flexbox_stf-table-cell.htm b/test/render/flex/flexbox_stf-table-cell.htm new file mode 100644 index 00000000..d456db2d --- /dev/null +++ b/test/render/flex/flexbox_stf-table-cell.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: table cell + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-table-cell.htm.png b/test/render/flex/flexbox_stf-table-cell.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-table-cell.htm.png differ diff --git a/test/render/flex/flexbox_stf-table-row-group.htm b/test/render/flex/flexbox_stf-table-row-group.htm new file mode 100644 index 00000000..cb636957 --- /dev/null +++ b/test/render/flex/flexbox_stf-table-row-group.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: table row group + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-table-row-group.htm.png b/test/render/flex/flexbox_stf-table-row-group.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-table-row-group.htm.png differ diff --git a/test/render/flex/flexbox_stf-table-row.htm b/test/render/flex/flexbox_stf-table-row.htm new file mode 100644 index 00000000..24603695 --- /dev/null +++ b/test/render/flex/flexbox_stf-table-row.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: table row + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-table-row.htm.png b/test/render/flex/flexbox_stf-table-row.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-table-row.htm.png differ diff --git a/test/render/flex/flexbox_stf-table.htm b/test/render/flex/flexbox_stf-table.htm new file mode 100644 index 00000000..8656055b --- /dev/null +++ b/test/render/flex/flexbox_stf-table.htm @@ -0,0 +1,38 @@ + + + +flexbox | flexcontainer versus stf :: table + + + + + +
+
+

filler

+

filler

+

filler

+

filler

+

filler

+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_stf-table.htm.png b/test/render/flex/flexbox_stf-table.htm.png new file mode 100644 index 00000000..bb85baad Binary files /dev/null and b/test/render/flex/flexbox_stf-table.htm.png differ diff --git a/test/render/flex/flexbox_visibility-collapse-line-wrapping.htm b/test/render/flex/flexbox_visibility-collapse-line-wrapping.htm new file mode 100644 index 00000000..1fd48501 --- /dev/null +++ b/test/render/flex/flexbox_visibility-collapse-line-wrapping.htm @@ -0,0 +1,40 @@ + + + +flexbox | visibility: collapse and line wrapping + + + + + +
+

filler

+

filler

+

FAIL

+

FAIL

+

filler

+

filler

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_visibility-collapse-line-wrapping.htm.png b/test/render/flex/flexbox_visibility-collapse-line-wrapping.htm.png new file mode 100644 index 00000000..b90ec28c Binary files /dev/null and b/test/render/flex/flexbox_visibility-collapse-line-wrapping.htm.png differ diff --git a/test/render/flex/flexbox_visibility-collapse.htm b/test/render/flex/flexbox_visibility-collapse.htm new file mode 100644 index 00000000..533f6a69 --- /dev/null +++ b/test/render/flex/flexbox_visibility-collapse.htm @@ -0,0 +1,34 @@ + + + +flexbox | visibility: collapse + + + + + +
+

filler

+

FAIL

+

filler

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_visibility-collapse.htm.png b/test/render/flex/flexbox_visibility-collapse.htm.png new file mode 100644 index 00000000..294a0821 Binary files /dev/null and b/test/render/flex/flexbox_visibility-collapse.htm.png differ diff --git a/test/render/flex/flexbox_width-overflow.htm.png b/test/render/flex/flexbox_width-overflow.htm.png new file mode 100644 index 00000000..8832cc7a Binary files /dev/null and b/test/render/flex/flexbox_width-overflow.htm.png differ diff --git a/test/render/flex/flexbox_wrap-long.htm b/test/render/flex/flexbox_wrap-long.htm new file mode 100644 index 00000000..3f03c50f --- /dev/null +++ b/test/render/flex/flexbox_wrap-long.htm @@ -0,0 +1,37 @@ + + + +flexbox | flex-wrap: wrap / long items + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_wrap-long.htm.png b/test/render/flex/flexbox_wrap-long.htm.png new file mode 100644 index 00000000..1f9bbde0 Binary files /dev/null and b/test/render/flex/flexbox_wrap-long.htm.png differ diff --git a/test/render/flex/flexbox_wrap-reverse.htm b/test/render/flex/flexbox_wrap-reverse.htm new file mode 100644 index 00000000..b1aaee73 --- /dev/null +++ b/test/render/flex/flexbox_wrap-reverse.htm @@ -0,0 +1,34 @@ + + + +flexbox | flex-wrap: wrap + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_wrap-reverse.htm.png b/test/render/flex/flexbox_wrap-reverse.htm.png new file mode 100644 index 00000000..1a181cd7 Binary files /dev/null and b/test/render/flex/flexbox_wrap-reverse.htm.png differ diff --git a/test/render/flex/flexbox_wrap.htm b/test/render/flex/flexbox_wrap.htm new file mode 100644 index 00000000..a5f7cb6b --- /dev/null +++ b/test/render/flex/flexbox_wrap.htm @@ -0,0 +1,34 @@ + + + +flexbox | flex-wrap: wrap + + + + + +
+ one + two + three + four +
+ + + \ No newline at end of file diff --git a/test/render/flex/flexbox_wrap.htm.png b/test/render/flex/flexbox_wrap.htm.png new file mode 100644 index 00000000..303d3169 Binary files /dev/null and b/test/render/flex/flexbox_wrap.htm.png differ diff --git a/test/render/flex/flexible-box-float.htm b/test/render/flex/flexible-box-float.htm new file mode 100644 index 00000000..f53c3b21 --- /dev/null +++ b/test/render/flex/flexible-box-float.htm @@ -0,0 +1,46 @@ + + + flexible box flex item float effect + + + + + + + +

'float' have no effect on a flex item.

+

The test passes if there is a green square, a blue square and no red square.

+
+

 

 

 

+
+ + + \ No newline at end of file diff --git a/test/render/flex/flexible-box-float.htm.chrome.png b/test/render/flex/flexible-box-float.htm.chrome.png new file mode 100644 index 00000000..0ecd77b0 Binary files /dev/null and b/test/render/flex/flexible-box-float.htm.chrome.png differ diff --git a/test/render/flex/flexible-box-float.htm.png b/test/render/flex/flexible-box-float.htm.png new file mode 100644 index 00000000..40d5fba6 Binary files /dev/null and b/test/render/flex/flexible-box-float.htm.png differ diff --git a/test/render/flex/flexible-order.htm b/test/render/flex/flexible-order.htm new file mode 100644 index 00000000..0bb4bd2c --- /dev/null +++ b/test/render/flex/flexible-order.htm @@ -0,0 +1,70 @@ + + + +CSS Test: Change the value of 'order' property + + + + + + + + + + + + + + + +
+
A
+
B
+
C
+
+ + + + + + + + \ No newline at end of file diff --git a/test/render/flex/flexible-order.htm.png b/test/render/flex/flexible-order.htm.png new file mode 100644 index 00000000..b0f4bada Binary files /dev/null and b/test/render/flex/flexible-order.htm.png differ diff --git a/test/render/flex/item-with-table-with-infinite-max-intrinsic-width.htm b/test/render/flex/item-with-table-with-infinite-max-intrinsic-width.htm new file mode 100644 index 00000000..ddc9dd7f --- /dev/null +++ b/test/render/flex/item-with-table-with-infinite-max-intrinsic-width.htm @@ -0,0 +1,21 @@ + + + +Flex item with table with infinite max intrinsic inline size + + + +

Test passes if there is a filled green square.

+
+
+ + + + + +
  
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/item-with-table-with-infinite-max-intrinsic-width.htm.png b/test/render/flex/item-with-table-with-infinite-max-intrinsic-width.htm.png new file mode 100644 index 00000000..38b0d067 Binary files /dev/null and b/test/render/flex/item-with-table-with-infinite-max-intrinsic-width.htm.png differ diff --git a/test/render/flex/justify-content_center.htm b/test/render/flex/justify-content_center.htm new file mode 100644 index 00000000..27aa76b7 --- /dev/null +++ b/test/render/flex/justify-content_center.htm @@ -0,0 +1,45 @@ + + + + + CSS Flexible Box Test: justify-content_center + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in middle of red rectangle.
+ 3. equal amounts of empty space between the left edge of the red rectangle and ractangle 1 and between the right edge of the red rectangle and rectangle 3.
+ 4. the height of the 1, 2, 3 is the same as the height of the red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/justify-content_center.htm.png b/test/render/flex/justify-content_center.htm.png new file mode 100644 index 00000000..4a3199da Binary files /dev/null and b/test/render/flex/justify-content_center.htm.png differ diff --git a/test/render/flex/justify-content_flex-end.htm b/test/render/flex/justify-content_flex-end.htm new file mode 100644 index 00000000..948516a6 --- /dev/null +++ b/test/render/flex/justify-content_flex-end.htm @@ -0,0 +1,44 @@ + + + + + CSS Flexible Box Test: justify-content_flex-end + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in right of red rectangle.
+ 3. 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/justify-content_flex-end.htm.png b/test/render/flex/justify-content_flex-end.htm.png new file mode 100644 index 00000000..061a84fb Binary files /dev/null and b/test/render/flex/justify-content_flex-end.htm.png differ diff --git a/test/render/flex/justify-content_flex-start.htm b/test/render/flex/justify-content_flex-start.htm new file mode 100644 index 00000000..fad6926b --- /dev/null +++ b/test/render/flex/justify-content_flex-start.htm @@ -0,0 +1,44 @@ + + + + + CSS Flexible Box Test: justify-content_flex-start + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle and no gap between them.
+ 2. the rectangle 1, 2, 3 appear in left of red rectangle.
+ 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/justify-content_flex-start.htm.png b/test/render/flex/justify-content_flex-start.htm.png new file mode 100644 index 00000000..5281fb16 Binary files /dev/null and b/test/render/flex/justify-content_flex-start.htm.png differ diff --git a/test/render/flex/justify-content_space-around.htm b/test/render/flex/justify-content_space-around.htm new file mode 100644 index 00000000..9d1f30c1 --- /dev/null +++ b/test/render/flex/justify-content_space-around.htm @@ -0,0 +1,44 @@ + + + + + CSS Flexible Box Test: justify-content_space-around + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle.
+ 2. the rectangle 1, 2, 3 are distributed such that the empty space between any two adjacent rectangle is the same, and the empty space of the row before the first and after the last rectangle are half the size of the other empty spaces.
+ 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/justify-content_space-around.htm.png b/test/render/flex/justify-content_space-around.htm.png new file mode 100644 index 00000000..295c5d0a Binary files /dev/null and b/test/render/flex/justify-content_space-around.htm.png differ diff --git a/test/render/flex/justify-content_space-between-001.htm b/test/render/flex/justify-content_space-between-001.htm new file mode 100644 index 00000000..4b5eaa97 --- /dev/null +++ b/test/render/flex/justify-content_space-between-001.htm @@ -0,0 +1,44 @@ + + + + + CSS Flexible Box Test: justify-content_space-between + + + + + + + +

Test passes if:
+ 1. the rectangle 1, 2, 3 show up in a row in a red rectangle.
+ 2. No gap between the left edge of red rectangle and the left of rectangle 1, no gap between the right edge of red rectangle and the right of rectangle 3 too, and rectangle 2 is distributed so that the empty space between rectangle 1 and rectangle 3 is the same.
+ 3. the height of the 1, 2, 3 is the same as the height of the red rectangle.

+
1
2
3
+ + + + + \ No newline at end of file diff --git a/test/render/flex/justify-content_space-between-001.htm.png b/test/render/flex/justify-content_space-between-001.htm.png new file mode 100644 index 00000000..1fa27206 Binary files /dev/null and b/test/render/flex/justify-content_space-between-001.htm.png differ diff --git a/test/render/flex/layout-algorithm_algo-cross-line-001.htm b/test/render/flex/layout-algorithm_algo-cross-line-001.htm new file mode 100644 index 00000000..ae98e7d0 --- /dev/null +++ b/test/render/flex/layout-algorithm_algo-cross-line-001.htm @@ -0,0 +1,36 @@ + + + + + CSS Grid Layout Test: cross size determination with overflow:scroll + + + + + + + +

Test passes if there is a filled green square with scrollbars and no red.

+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/layout-algorithm_algo-cross-line-001.htm.png b/test/render/flex/layout-algorithm_algo-cross-line-001.htm.png new file mode 100644 index 00000000..e6e39607 Binary files /dev/null and b/test/render/flex/layout-algorithm_algo-cross-line-001.htm.png differ diff --git a/test/render/flex/layout-algorithm_algo-cross-line-002.htm b/test/render/flex/layout-algorithm_algo-cross-line-002.htm new file mode 100644 index 00000000..5716cdfb --- /dev/null +++ b/test/render/flex/layout-algorithm_algo-cross-line-002.htm @@ -0,0 +1,37 @@ + + + + + CSS Grid Layout Test: cross size determination with overflow:scroll + + + + + + + +

Test passes if there is a filled green square with scrollbars and no red.

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/layout-algorithm_algo-cross-line-002.htm.png b/test/render/flex/layout-algorithm_algo-cross-line-002.htm.png new file mode 100644 index 00000000..e6e39607 Binary files /dev/null and b/test/render/flex/layout-algorithm_algo-cross-line-002.htm.png differ diff --git a/test/render/flex/multi-line-wrap-reverse-column-reverse.htm b/test/render/flex/multi-line-wrap-reverse-column-reverse.htm new file mode 100644 index 00000000..4f88b89f --- /dev/null +++ b/test/render/flex/multi-line-wrap-reverse-column-reverse.htm @@ -0,0 +1,74 @@ + + + + + CSS Test: flex container multiline wrapping-reverse in column-reverse direction. + + + + + + + + + + +
+

3-1

+

2-2

+

2-1

+

1-3

+

1-2

+

1-1

+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/multi-line-wrap-reverse-column-reverse.htm.png b/test/render/flex/multi-line-wrap-reverse-column-reverse.htm.png new file mode 100644 index 00000000..1cbe50ae Binary files /dev/null and b/test/render/flex/multi-line-wrap-reverse-column-reverse.htm.png differ diff --git a/test/render/flex/multi-line-wrap-reverse-row-reverse.htm b/test/render/flex/multi-line-wrap-reverse-row-reverse.htm new file mode 100644 index 00000000..07c3143a --- /dev/null +++ b/test/render/flex/multi-line-wrap-reverse-row-reverse.htm @@ -0,0 +1,68 @@ + + + + + CSS Test: flex container multiline wrapping-reverse in row-reverse direction. + + + + + + + + + +
+

3-1

+

2-2

+

2-1

+

1-3

+

1-2

+

1-1

+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/multi-line-wrap-reverse-row-reverse.htm.png b/test/render/flex/multi-line-wrap-reverse-row-reverse.htm.png new file mode 100644 index 00000000..2d73f1cd Binary files /dev/null and b/test/render/flex/multi-line-wrap-reverse-row-reverse.htm.png differ diff --git a/test/render/flex/multi-line-wrap-with-column-reverse.htm b/test/render/flex/multi-line-wrap-with-column-reverse.htm new file mode 100644 index 00000000..ab07525c --- /dev/null +++ b/test/render/flex/multi-line-wrap-with-column-reverse.htm @@ -0,0 +1,67 @@ + + + + + CSS Test: flex container multiline wrapping in column-reverse direction + + + + + + + + + +
+

1-3

+

1-2

+

1-1

+

2-2

+

2-1

+

3-1

+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/multi-line-wrap-with-column-reverse.htm.png b/test/render/flex/multi-line-wrap-with-column-reverse.htm.png new file mode 100644 index 00000000..45b3da24 Binary files /dev/null and b/test/render/flex/multi-line-wrap-with-column-reverse.htm.png differ diff --git a/test/render/flex/multi-line-wrap-with-row-reverse.htm b/test/render/flex/multi-line-wrap-with-row-reverse.htm new file mode 100644 index 00000000..fc8fb079 --- /dev/null +++ b/test/render/flex/multi-line-wrap-with-row-reverse.htm @@ -0,0 +1,64 @@ + + + + + CSS Test: flex container multiline wrapping in row-reverse direction + + + + + + + + + +
+

1-3

+

1-2

+

1-1

+

2-2

+

2-1

+

3-1

+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/multi-line-wrap-with-row-reverse.htm.png b/test/render/flex/multi-line-wrap-with-row-reverse.htm.png new file mode 100644 index 00000000..b715b147 Binary files /dev/null and b/test/render/flex/multi-line-wrap-with-row-reverse.htm.png differ diff --git a/test/render/flex/multiline-reverse-wrap-baseline.htm b/test/render/flex/multiline-reverse-wrap-baseline.htm new file mode 100644 index 00000000..e35cf60f --- /dev/null +++ b/test/render/flex/multiline-reverse-wrap-baseline.htm @@ -0,0 +1,61 @@ + + + +CSS Flexbox: multiline reverse wrap baseline. + + + + + + +
+
first
first
first
+
second
+
third
+
fourth
fourth
+
+ +
+
first
first
first
+
second
+
third
+
fourth
fourth
+
+ +
+
first
+
second
+
third
third
+
+ + + + + + \ No newline at end of file diff --git a/test/render/flex/multiline-reverse-wrap-baseline.htm.png b/test/render/flex/multiline-reverse-wrap-baseline.htm.png new file mode 100644 index 00000000..4e68413e Binary files /dev/null and b/test/render/flex/multiline-reverse-wrap-baseline.htm.png differ diff --git a/test/render/flex/negative-flex-margins-crash.htm.png b/test/render/flex/negative-flex-margins-crash.htm.png new file mode 100644 index 00000000..d4ea7f4a Binary files /dev/null and b/test/render/flex/negative-flex-margins-crash.htm.png differ diff --git a/test/render/flex/negative-margins-001.htm b/test/render/flex/negative-margins-001.htm new file mode 100644 index 00000000..74cf8c33 --- /dev/null +++ b/test/render/flex/negative-margins-001.htm @@ -0,0 +1,51 @@ + + + + +CSS Flexible Box Test: Negative margins + + + + + + +

You should see a green rectangle with a black border, 40px wide. You should see no red.

+ +
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/negative-margins-001.htm.png b/test/render/flex/negative-margins-001.htm.png new file mode 100644 index 00000000..7d90389d Binary files /dev/null and b/test/render/flex/negative-margins-001.htm.png differ diff --git a/test/render/flex/order-001.htm b/test/render/flex/order-001.htm new file mode 100644 index 00000000..2f305fb9 --- /dev/null +++ b/test/render/flex/order-001.htm @@ -0,0 +1,42 @@ + + + + + CSS Test: The 'order' property on flex items set to a value of '-1' + + + + + + + +

Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/order-001.htm.png b/test/render/flex/order-001.htm.png new file mode 100644 index 00000000..156126b1 Binary files /dev/null and b/test/render/flex/order-001.htm.png differ diff --git a/test/render/flex/order-with-column-reverse.htm b/test/render/flex/order-with-column-reverse.htm new file mode 100644 index 00000000..19880e25 --- /dev/null +++ b/test/render/flex/order-with-column-reverse.htm @@ -0,0 +1,44 @@ + + + + + CSS Test: flex container layout lowest order with column-reverse direction + + + + + + + + +

Test passes if the paragraph below reads 'First,Second,Third' from top.

+
+

Second,

+

First,

+

Third

+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/order-with-column-reverse.htm.png b/test/render/flex/order-with-column-reverse.htm.png new file mode 100644 index 00000000..a9fdf566 Binary files /dev/null and b/test/render/flex/order-with-column-reverse.htm.png differ diff --git a/test/render/flex/order-with-row-reverse.htm b/test/render/flex/order-with-row-reverse.htm new file mode 100644 index 00000000..f780761c --- /dev/null +++ b/test/render/flex/order-with-row-reverse.htm @@ -0,0 +1,42 @@ + + + + + CSS Test: flex container layout lowest order with row-reverse direction + + + + + + + + + +

Test passes if the paragraph below reads 'First,Second,Third' from leftmost.

+
+

First,

+

Second,

+

Third

+
+ + + + + \ No newline at end of file diff --git a/test/render/flex/order-with-row-reverse.htm.png b/test/render/flex/order-with-row-reverse.htm.png new file mode 100644 index 00000000..cfa0adb7 Binary files /dev/null and b/test/render/flex/order-with-row-reverse.htm.png differ diff --git a/test/render/flex/padding-overflow-crash.htm b/test/render/flex/padding-overflow-crash.htm new file mode 100644 index 00000000..d895c4dc --- /dev/null +++ b/test/render/flex/padding-overflow-crash.htm @@ -0,0 +1,15 @@ + + + + + + + +

Test passes if there is a filled green square only.

+ +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/padding-overflow-crash.htm.png b/test/render/flex/padding-overflow-crash.htm.png new file mode 100644 index 00000000..ced33bc8 Binary files /dev/null and b/test/render/flex/padding-overflow-crash.htm.png differ diff --git a/test/render/flex/percentage-heights-004.htm b/test/render/flex/percentage-heights-004.htm new file mode 100644 index 00000000..c81c7ed3 --- /dev/null +++ b/test/render/flex/percentage-heights-004.htm @@ -0,0 +1,66 @@ + + + +CSS Flexbox: Percentages in stretched container + + + + + + +

You should not see tan (except perhaps as the background of a horizontal + scrollbar), and you should not see a vertical scrollbar.

+ +
+
+
+ hello +
+
+
+ +
+
+
+ hello +
+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/percentage-heights-004.htm.png b/test/render/flex/percentage-heights-004.htm.png new file mode 100644 index 00000000..4eca9e23 Binary files /dev/null and b/test/render/flex/percentage-heights-004.htm.png differ diff --git a/test/render/flex/percentage-heights-006.htm b/test/render/flex/percentage-heights-006.htm new file mode 100644 index 00000000..60822626 --- /dev/null +++ b/test/render/flex/percentage-heights-006.htm @@ -0,0 +1,48 @@ + + + +Definite cross sizes + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/percentage-heights-006.htm.png b/test/render/flex/percentage-heights-006.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/percentage-heights-006.htm.png differ diff --git a/test/render/flex/percentage-heights-007.htm b/test/render/flex/percentage-heights-007.htm new file mode 100644 index 00000000..a72e33d1 --- /dev/null +++ b/test/render/flex/percentage-heights-007.htm @@ -0,0 +1,47 @@ + + + +Definite sizes with fixed flex-basis + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/test/render/flex/percentage-heights-007.htm.png b/test/render/flex/percentage-heights-007.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/percentage-heights-007.htm.png differ diff --git a/test/render/flex/percentage-heights-009.htm b/test/render/flex/percentage-heights-009.htm new file mode 100644 index 00000000..55cbd1e1 --- /dev/null +++ b/test/render/flex/percentage-heights-009.htm @@ -0,0 +1,42 @@ + + + +height: 100% should not be considered indefinite on a second flex item (triggers an obscure bug in Blink) + + + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/percentage-heights-009.htm.png b/test/render/flex/percentage-heights-009.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/percentage-heights-009.htm.png differ diff --git a/test/render/flex/space-evenly-001.htm b/test/render/flex/space-evenly-001.htm new file mode 100644 index 00000000..51420ef4 --- /dev/null +++ b/test/render/flex/space-evenly-001.htm @@ -0,0 +1,40 @@ + + + + + CSS Box Alignment: space-evenly & flexbox with single item + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+
+ + + + \ No newline at end of file diff --git a/test/render/flex/space-evenly-001.htm.png b/test/render/flex/space-evenly-001.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/space-evenly-001.htm.png differ diff --git a/test/render/flex/support/a-green.css b/test/render/flex/support/a-green.css new file mode 100644 index 00000000..b0dbb071 --- /dev/null +++ b/test/render/flex/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/test/render/flex/support/b-green.css b/test/render/flex/support/b-green.css new file mode 100644 index 00000000..a0473f5c --- /dev/null +++ b/test/render/flex/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; } \ No newline at end of file diff --git a/test/render/flex/support/c-red.css b/test/render/flex/support/c-red.css new file mode 100644 index 00000000..d4ba5c64 --- /dev/null +++ b/test/render/flex/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; } \ No newline at end of file diff --git a/test/render/flex/support/flexbox.css b/test/render/flex/support/flexbox.css new file mode 100644 index 00000000..83502cd1 --- /dev/null +++ b/test/render/flex/support/flexbox.css @@ -0,0 +1,143 @@ +.flexbox { + display: -webkit-flex; + display: flex; +} +.inline-flexbox { + display: -webkit-inline-flex; + display: inline-flex; +} + +.flex-none { + -webkit-flex: none; + flex: none; +} +.flex-auto { + -webkit-flex: auto; + flex: auto; +} +.flex-one { + -webkit-flex: 1; + flex: 1; +} +.flex-one-one-auto { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; +} + +.row { + -webkit-flex-direction: row; + flex-direction: row; +} +.row-reverse { + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.column { + -webkit-flex-direction: column; + flex-direction: column; +} +.column-reverse { + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.wrap { + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.wrap-reverse { + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; +} + +.align-content-flex-start { + -webkit-align-content: flex-start; + align-content: flex-start; +} +.align-content-flex-end { + -webkit-align-content: flex-end; + align-content: flex-end; +} +.align-content-center { + -webkit-align-content: center; + align-content: center; +} +.align-content-space-between { + -webkit-align-content: space-between; + align-content: space-between; +} +.align-content-space-around { + -webkit-align-content: space-around; + align-content: space-around; +} +.align-content-stretch { + -webkit-align-content: stretch; + align-content: stretch; +} + +.align-items-flex-start { + -webkit-align-items: flex-start; + align-items: flex-start; +} +.align-items-flex-end { + -webkit-align-items: flex-end; + align-items: flex-end; +} +.align-items-center { + -webkit-align-items: center; + align-items: center; +} +.align-items-baseline { + -webkit-align-items: baseline; + align-items: baseline; +} +.align-items-stretch { + -webkit-align-items: stretch; + align-items: stretch; +} + +.align-self-auto { + -webkit-align-self: auto; + align-self: auto; +} +.align-self-flex-start { + -webkit-align-self: flex-start; + align-self: flex-start; +} +.align-self-flex-end { + -webkit-align-self: flex-end; + align-self: flex-end; +} +.align-self-center { + -webkit-align-self: center; + align-self: center; +} +.align-self-baseline { + -webkit-align-self: baseline; + align-self: baseline; +} +.align-self-stretch { + -webkit-align-self: stretch; + align-self: stretch; +} + +.justify-content-flex-start { + -webkit-justify-content: flex-start; + justify-content: flex-start; +} +.justify-content-flex-end { + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +.justify-content-center { + -webkit-justify-content: center; + justify-content: center; +} +.justify-content-space-between { + -webkit-justify-content: space-between; + justify-content: space-between; +} +.justify-content-space-around { + -webkit-justify-content: space-around; + justify-content: space-around; +} diff --git a/test/render/flex/support/import-green.css b/test/render/flex/support/import-green.css new file mode 100644 index 00000000..537104e6 --- /dev/null +++ b/test/render/flex/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/test/render/flex/support/import-red.css b/test/render/flex/support/import-red.css new file mode 100644 index 00000000..9945ef47 --- /dev/null +++ b/test/render/flex/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/test/render/flex/support/test-style.css b/test/render/flex/support/test-style.css new file mode 100644 index 00000000..17f44c11 --- /dev/null +++ b/test/render/flex/support/test-style.css @@ -0,0 +1,18 @@ + #test01, #test02, #test03{ + width: 50px; + height: 50px; + text-align:center; + font-size: 20px; + } + #test{ + background: #ff0000; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } diff --git a/test/render/flex/table-as-item-auto-min-width.htm b/test/render/flex/table-as-item-auto-min-width.htm new file mode 100644 index 00000000..ae5f240e --- /dev/null +++ b/test/render/flex/table-as-item-auto-min-width.htm @@ -0,0 +1,16 @@ + + + +CSS Flexbox Test: Flex item as table, specified width less than minimum intrinsic width + + + +

Test passes if there is a filled green square and no red.

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-as-item-auto-min-width.htm.png b/test/render/flex/table-as-item-auto-min-width.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/table-as-item-auto-min-width.htm.png differ diff --git a/test/render/flex/table-as-item-fixed-min-width-2.htm b/test/render/flex/table-as-item-fixed-min-width-2.htm new file mode 100644 index 00000000..34b4a2b9 --- /dev/null +++ b/test/render/flex/table-as-item-fixed-min-width-2.htm @@ -0,0 +1,23 @@ + + + +table is flex item + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-as-item-fixed-min-width-2.htm.png b/test/render/flex/table-as-item-fixed-min-width-2.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/table-as-item-fixed-min-width-2.htm.png differ diff --git a/test/render/flex/table-as-item-fixed-min-width.htm b/test/render/flex/table-as-item-fixed-min-width.htm new file mode 100644 index 00000000..59457d30 --- /dev/null +++ b/test/render/flex/table-as-item-fixed-min-width.htm @@ -0,0 +1,21 @@ + + + +CSS Flexbox Test: Flex item as table, specified width and min-width less than minimum intrinsic width + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-as-item-fixed-min-width.htm.png b/test/render/flex/table-as-item-fixed-min-width.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/table-as-item-fixed-min-width.htm.png differ diff --git a/test/render/flex/table-as-item-narrow-content-2.htm.png b/test/render/flex/table-as-item-narrow-content-2.htm.png new file mode 100644 index 00000000..a08a84f4 Binary files /dev/null and b/test/render/flex/table-as-item-narrow-content-2.htm.png differ diff --git a/test/render/flex/table-as-item-narrow-content.htm b/test/render/flex/table-as-item-narrow-content.htm new file mode 100644 index 00000000..5aeafed4 --- /dev/null +++ b/test/render/flex/table-as-item-narrow-content.htm @@ -0,0 +1,18 @@ + + + +CSS Flexbox Test: Flex item as table with narrow content + + + + +

Test passes if there is a filled green square.

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-as-item-narrow-content.htm.png b/test/render/flex/table-as-item-narrow-content.htm.png new file mode 100644 index 00000000..1d872136 Binary files /dev/null and b/test/render/flex/table-as-item-narrow-content.htm.png differ diff --git a/test/render/flex/table-as-item-percent-width-cell-001.htm.png b/test/render/flex/table-as-item-percent-width-cell-001.htm.png new file mode 100644 index 00000000..6b8de0e9 Binary files /dev/null and b/test/render/flex/table-as-item-percent-width-cell-001.htm.png differ diff --git a/test/render/flex/table-as-item-stretch-cross-size-3.htm b/test/render/flex/table-as-item-stretch-cross-size-3.htm new file mode 100644 index 00000000..9bd29584 --- /dev/null +++ b/test/render/flex/table-as-item-stretch-cross-size-3.htm @@ -0,0 +1,30 @@ + + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+ +
+ + + +
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-as-item-stretch-cross-size-3.htm.png b/test/render/flex/table-as-item-stretch-cross-size-3.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/table-as-item-stretch-cross-size-3.htm.png differ diff --git a/test/render/flex/table-as-item-stretch-cross-size-4.htm b/test/render/flex/table-as-item-stretch-cross-size-4.htm new file mode 100644 index 00000000..31642cec --- /dev/null +++ b/test/render/flex/table-as-item-stretch-cross-size-4.htm @@ -0,0 +1,34 @@ + + + + + + + + + + + + +

Test passes if there is a filled green square and no red.

+
+ + +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-as-item-stretch-cross-size-4.htm.png b/test/render/flex/table-as-item-stretch-cross-size-4.htm.png new file mode 100644 index 00000000..d230b8dd Binary files /dev/null and b/test/render/flex/table-as-item-stretch-cross-size-4.htm.png differ diff --git a/test/render/flex/table-with-infinite-max-intrinsic-width.htm b/test/render/flex/table-with-infinite-max-intrinsic-width.htm new file mode 100644 index 00000000..2eebf92d --- /dev/null +++ b/test/render/flex/table-with-infinite-max-intrinsic-width.htm @@ -0,0 +1,19 @@ + + + +Table flex item with infinite max intrinsic inline size + + + +

Test passes if there is a filled green square.

+
+ + + + + +
  
+
+ + + \ No newline at end of file diff --git a/test/render/flex/table-with-infinite-max-intrinsic-width.htm.png b/test/render/flex/table-with-infinite-max-intrinsic-width.htm.png new file mode 100644 index 00000000..ae0cbd17 Binary files /dev/null and b/test/render/flex/table-with-infinite-max-intrinsic-width.htm.png differ diff --git a/test/render/flex/zero-content-size-with-scrollbar-crash.htm b/test/render/flex/zero-content-size-with-scrollbar-crash.htm new file mode 100644 index 00000000..dceaffca --- /dev/null +++ b/test/render/flex/zero-content-size-with-scrollbar-crash.htm @@ -0,0 +1,11 @@ + + + + + +
+
+
+ + + \ No newline at end of file diff --git a/test/render/flex/zero-content-size-with-scrollbar-crash.htm.png b/test/render/flex/zero-content-size-with-scrollbar-crash.htm.png new file mode 100644 index 00000000..dcbee0d8 Binary files /dev/null and b/test/render/flex/zero-content-size-with-scrollbar-crash.htm.png differ diff --git a/test/render/test39.htm b/test/render/test39.htm new file mode 100644 index 00000000..6e417bb7 --- /dev/null +++ b/test/render/test39.htm @@ -0,0 +1,42 @@ + + +
+
block number 1
+
block number 2
+
hello my dear friend
+
+
+
block number 1
+
block number 2
+
hello my dear friend
+
+
+
block number 1
+
block number 2
+
hello my dear friend
+
+
+
block number 1
+
block number 2
+
hello my dear friend
+
diff --git a/test/render/test39.htm.png b/test/render/test39.htm.png new file mode 100644 index 00000000..5d518ffb Binary files /dev/null and b/test/render/test39.htm.png differ diff --git a/test/render_test.cpp b/test/render_test.cpp index 62538f01..4c5c7aad 100644 --- a/test/render_test.cpp +++ b/test/render_test.cpp @@ -13,14 +13,14 @@ using namespace std; vector find_htm_files(); void test(string filename); -const char* test_dir = "../test/render/"; // ctest is run from litehtml/build +const char* test_dir = "../test/render"; // ctest is run from litehtml/build //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ using render_test = testing::TestWithParam; TEST_P(render_test, _) { - test(test_dir + GetParam()); + test(string(test_dir) + "/" + GetParam()); } INSTANTIATE_TEST_SUITE_P(, render_test, testing::ValuesIn(find_htm_files())); @@ -28,19 +28,34 @@ INSTANTIATE_TEST_SUITE_P(, render_test, testing::ValuesIn(find_htm_files())); void error(const char* msg) { puts(msg); exit(1); } -vector find_htm_files() +void read_dir(const string& subdir, vector& files) { - DIR* dir = opendir(test_dir); - if (!dir) error("Cannot read test directory"); - vector ret; + string full_path = string(test_dir) + "/" + subdir; + DIR* dir = opendir(full_path.c_str()); + if (!dir) error(full_path.c_str()); while (dirent* ent = readdir(dir)) { - if (ent->d_type != DT_REG) continue; // if not regular file string name = ent->d_name; - if (name[0] != '-' && name.size() > 4 && name.substr(name.size() - 4) == ".htm") - ret.push_back(name); + if (ent->d_type == DT_DIR) + { + if(name != "." && name != ".." && name[0] != '-') + { + read_dir(subdir + "/" + name, files); + } + } else if (ent->d_type == DT_REG) + { + if (name[0] != '-' && name.size() > 4 && + (name.substr(name.size() - 4) == ".htm" || name.substr(name.size() - 5) == ".html")) + files.push_back(subdir + "/" + name); + } } closedir(dir); +} + +vector find_htm_files() +{ + vector ret; + read_dir("", ret); sort(ret.begin(), ret.end()); return ret; } @@ -69,7 +84,16 @@ void test(string filename) string html = readfile(filename); int width = 800, height = 1600; // image will be cropped to content_width/content_height - test_container container(width, height, test_dir); + auto last_slash_pos = filename.find_last_of('/'); + string base_path; + if(last_slash_pos != string::npos) + { + base_path = filename.substr(0, last_slash_pos); + } else + { + base_path = test_dir; + } + test_container container(width, height, base_path); auto doc = document::createFromString(html.c_str(), &container); doc->render(width);