def test_intrinsic_width(self):
node = TestNode(name='img', style=CSS(display=INLINE))
node.intrinsic.width = 50
node.intrinsic.is_replaced = True
self.layout_node(node)
self.assertLayout(
node, {
'tag': 'img',
'border_box': {
'position': (0, 0),
'size': (50, 25)
},
'padding_box': {
'position': (0, 0),
'size': (50, 25)
},
'content': {
'position': (0, 0),
'size': (50, 25)
},
})
def test_auto_top_margin(self):
node = TestNode(name='img', style=CSS(display=INLINE, margin_top=AUTO))
node.intrinsic.width = 50
node.intrinsic.height = 10
node.intrinsic.is_replaced = True
self.layout_node(node)
self.assertLayout(
node, {
'tag': 'img',
'border_box': {
'position': (0, 0),
'size': (50, 10)
},
'padding_box': {
'position': (0, 0),
'size': (50, 10)
},
'content': {
'position': (0, 0),
'size': (50, 10)
},
})
def test_intrinsic_height_and_ratio(self):
node = TestNode(name='img', style=CSS(display=INLINE))
node.intrinsic.height = 10
node.intrinsic.ratio = 3.0
node.intrinsic.is_replaced = True
self.layout_node(node)
self.assertLayout(
node, {
'tag': 'img',
'border_box': {
'position': (0, 0),
'size': (30, 10)
},
'padding_box': {
'position': (0, 0),
'size': (30, 10)
},
'content': {
'position': (0, 0),
'size': (30, 10)
},
})
def test_border_shorthands_valid_property_tuple_sets_shorthand_subproperties(
self):
for direction in ['bottom', 'left', 'right', 'top']:
node = TestNode(style=CSS())
node.layout.dirty = None
setattr(node.style, 'border_' + direction,
('solid', 'thick', 'black'))
self.assertEqual(
str(
getattr(
node.style, 'border_{direction}_color'.format(
direction=direction))), 'rgba(0, 0, 0, 1.0)')
self.assertEqual(
str(
getattr(
node.style, 'border_{direction}_style'.format(
direction=direction))), 'solid')
self.assertEqual(
str(
getattr(
node.style, 'border_{direction}_width'.format(
direction=direction))), 'thick')
def test_None_default_property(self):
node = TestNode(style=CSS())
node.layout.dirty = None
# Default value is None
self.assertIsNone(node.style.max_width)
self.assertIsNone(node.style.dirty)
# Modify the value
node.style.max_width = 10
self.assertEqual(node.style.max_width, 10)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Set the value to the same value.
# Dirty flag is not set.
node.style.max_width = 10
self.assertEqual(node.style.max_width, 10)
self.assertFalse(node.style.dirty)
# Set the value to something new
# Dirty flag is set.
node.style.max_width = 20
self.assertEqual(node.style.max_width, 20)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Clear the property
del node.style.max_width
self.assertIsNone(node.style.max_width)
self.assertTrue(node.style.dirty)
def test_shorthand_valid_outline_property_resets(self):
node = TestNode(style=CSS())
node.layout.dirty = None
node.style.outline_color = "black"
node.style.outline_style = "solid"
node.style.outline_width = "thick"
self.assertEqual(str(node.style.outline),
'rgba(0, 0, 0, 1.0) solid thick')
self.assertEqual(
str(node.style),
"outline-color: rgba(0, 0, 0, 1.0); outline-style: solid; outline-width: thick"
)
# This should reset all other properties to their initial values
node.style.outline = "black"
self.assertEqual(str(node.style.outline_color), "rgba(0, 0, 0, 1.0)")
self.assertEqual(node.style.outline_style, None)
self.assertEqual(node.style.outline_width, "medium")
self.assertEqual(str(node.style.outline), 'rgba(0, 0, 0, 1.0)')
self.assertEqual(str(node.style), "outline-color: rgba(0, 0, 0, 1.0)")
def test_property_border_spacing_valid_sequence_2_items(self):
node = TestNode(style=CSS())
node.layout.dirty = None
# List of strings
node.style.border_spacing = ['1', '2']
self.assertEqual(node.style.border_spacing.horizontal, 1 * px)
self.assertEqual(node.style.border_spacing.vertical, 2 * px)
self.assertEqual(repr(node.style.border_spacing), 'BorderSpacing(1px, 2px)')
self.assertEqual(str(node.style.border_spacing), '1px 2px')
# List
node.style.border_spacing = [1, 2]
self.assertEqual(node.style.border_spacing.horizontal, 1 * px)
self.assertEqual(node.style.border_spacing.vertical, 2 * px)
self.assertEqual(repr(node.style.border_spacing), 'BorderSpacing(1px, 2px)')
self.assertEqual(str(node.style.border_spacing), '1px 2px')
# Tuple
node.style.border_spacing = (1, 2)
self.assertEqual(node.style.border_spacing.horizontal, 1 * px)
self.assertEqual(node.style.border_spacing.vertical, 2 * px)
self.assertEqual(repr(node.style.border_spacing), 'BorderSpacing(1px, 2px)')
self.assertEqual(str(node.style.border_spacing), '1px 2px')
def test_simple_vertical(self):
child1 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10),
)
child2 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10),
)
child3 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10),
)
root = TestNode(name='div',
style=CSS(display=BLOCK),
children=[child1, child2, child3])
layout(self.display, root)
self.assertLayout(
root, {
'tag':
'div',
'border_box': {
'position': (0, 0),
'size': (1024, 768)
},
'padding_box': {
'position': (0, 0),
'size': (1024, 768)
},
'content': {
'position': (0, 0),
'size': (1024, 768)
},
'children': [{
'tag': 'div',
'border_box': {
'position': (0, 0),
'size': (1024, 10)
},
'padding_box': {
'position': (0, 0),
'size': (1024, 10)
},
'content': {
'position': (0, 0),
'size': (1024, 10)
},
}, {
'tag': 'div',
'border_box': {
'position': (0, 10),
'size': (1024, 10)
},
'padding_box': {
'position': (0, 10),
'size': (1024, 10)
},
'content': {
'position': (0, 10),
'size': (1024, 10)
},
}, {
'tag': 'div',
'border_box': {
'position': (0, 20),
'size': (1024, 10)
},
'padding_box': {
'position': (0, 20),
'size': (1024, 10)
},
'content': {
'position': (0, 20),
'size': (1024, 10)
},
}],
})
def test_quotes_valid_list_1_pair(self):
node = TestNode(style=CSS())
node.layout.dirty = None
node.style.quotes = [('<', '>')]
self.assertEqual(node.style.quotes, Quotes([('<', '>')]))
def test_quotes_valid_sequence_4_items(self):
node = TestNode(style=CSS())
node.layout.dirty = None
node.style.quotes = '<', '>', '{', '}'
self.assertEqual(node.style.quotes, Quotes([('<', '>'), ('{', '}')]))
def test_quotes_valid_str_2_items(self):
node = TestNode(style=CSS())
node.layout.dirty = None
node.style.quotes = "'<' '>'"
self.assertEqual(node.style.quotes, Quotes([('<', '>')]))
def test_validated_property_cursor_default_value(self):
node = TestNode(style=CSS())
node.layout.dirty = None
self.assertEqual(str(node.style.cursor), AUTO)
def test_directional_property(self):
node = TestNode(style=CSS())
node.layout.dirty = None
# Default value is 0
self.assertEqual(node.style.margin, (0, 0, 0, 0))
self.assertEqual(node.style.margin_top, 0)
self.assertEqual(node.style.margin_right, 0)
self.assertEqual(node.style.margin_bottom, 0)
self.assertEqual(node.style.margin_left, 0)
self.assertIsNone(node.style.dirty)
# Set a value in one axis
node.style.margin_top = 10
self.assertEqual(node.style.margin, (10, 0, 0, 0))
self.assertEqual(node.style.margin_top, 10)
self.assertEqual(node.style.margin_right, 0)
self.assertEqual(node.style.margin_bottom, 0)
self.assertEqual(node.style.margin_left, 0)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Set a value directly with a single item
node.style.margin = (10, )
self.assertEqual(node.style.margin, (10, 10, 10, 10))
self.assertEqual(node.style.margin_top, 10)
self.assertEqual(node.style.margin_right, 10)
self.assertEqual(node.style.margin_bottom, 10)
self.assertEqual(node.style.margin_left, 10)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Set a value directly with a single item
node.style.margin = 30
self.assertEqual(node.style.margin, (30, 30, 30, 30))
self.assertEqual(node.style.margin_top, 30)
self.assertEqual(node.style.margin_right, 30)
self.assertEqual(node.style.margin_bottom, 30)
self.assertEqual(node.style.margin_left, 30)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Set a value directly with a 2 values
node.style.margin = (10, 20)
self.assertEqual(node.style.margin, (10, 20, 10, 20))
self.assertEqual(node.style.margin_top, 10)
self.assertEqual(node.style.margin_right, 20)
self.assertEqual(node.style.margin_bottom, 10)
self.assertEqual(node.style.margin_left, 20)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Set a value directly with a 3 values
node.style.margin = (10, 20, 30)
self.assertEqual(node.style.margin, (10, 20, 30, 20))
self.assertEqual(node.style.margin_top, 10)
self.assertEqual(node.style.margin_right, 20)
self.assertEqual(node.style.margin_bottom, 30)
self.assertEqual(node.style.margin_left, 20)
self.assertTrue(node.style.dirty)
# Clean the layout
node.layout.dirty = False
# Set a value directly with a 4 values
node.style.margin = (10, 20, 30, 40)
self.assertEqual(node.style.margin, (10, 20, 30, 40))
self.assertEqual(node.style.margin_top, 10)
self.assertEqual(node.style.margin_right, 20)
self.assertEqual(node.style.margin_bottom, 30)
self.assertEqual(node.style.margin_left, 40)
self.assertTrue(node.style.dirty)
# Set a value directly with an invalid number of values
with self.assertRaises(ValueError):
node.style.margin = ()
with self.assertRaises(ValueError):
node.style.margin = (10, 20, 30, 40, 50)
# Clean the layout
node.layout.dirty = False
# Clear a value on one axis
del node.style.margin_top
self.assertEqual(node.style.margin, (0, 20, 30, 40))
self.assertEqual(node.style.margin_top, 0)
self.assertEqual(node.style.margin_right, 20)
self.assertEqual(node.style.margin_bottom, 30)
self.assertEqual(node.style.margin_left, 40)
self.assertTrue(node.style.dirty)
# Restore the top margin
node.style.margin_top = 10
# Clean the layout
node.layout.dirty = False
# Clear a value directly
del node.style.margin
self.assertEqual(node.style.margin, (0, 0, 0, 0))
self.assertEqual(node.style.margin_top, 0)
self.assertEqual(node.style.margin_right, 0)
self.assertEqual(node.style.margin_bottom, 0)
self.assertEqual(node.style.margin_left, 0)
self.assertTrue(node.style.dirty)
def layout_node(self, node):
root = TestNode(style=CSS(display=BLOCK), children=[node])
layout(self.display, root)
def test_overflow_outside_parent(self):
grandchild1 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10, margin=50),
)
grandchild2 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10, margin=40),
)
child = TestNode(name='div',
style=CSS(display=BLOCK, height=10, margin=10),
children=[grandchild1, grandchild2])
root = TestNode(name='div', style=CSS(display=BLOCK), children=[child])
layout(self.display, root)
self.assertLayout(
root, {
'tag':
'div',
'border_box': {
'size': (1024, 708),
'position': (0, 50)
},
'padding_box': {
'size': (1024, 708),
'position': (0, 50)
},
'content': {
'size': (1024, 708),
'position': (0, 50)
},
'children': [{
'tag':
'div',
'border_box': {
'size': (1004, 10),
'position': (10, 50)
},
'padding_box': {
'size': (1004, 10),
'position': (10, 50)
},
'content': {
'size': (1004, 10),
'position': (10, 50)
},
'children': [{
'tag': 'div',
'border_box': {
'size': (904, 10),
'position': (60, 50)
},
'padding_box': {
'size': (904, 10),
'position': (60, 50)
},
'content': {
'size': (904, 10),
'position': (60, 50)
},
}, {
'tag': 'div',
'border_box': {
'size': (924, 10),
'position': (50, 110)
},
'padding_box': {
'size': (924, 10),
'position': (50, 110)
},
'content': {
'size': (924, 10),
'position': (50, 110)
},
}],
}],
})
def test_shorthand_valid_outline_property_initial_values(self):
node = TestNode(style=CSS())
node.layout.dirty = None
self.assertEqual(str(node.style.outline), '')
def test_quotes_valid_str(self):
node = TestNode(style=CSS())
node.layout.dirty = None
node.style.quotes = [('<', '>'), ('{', '}')]
self.assertEqual(str(node.style), "quotes: '<' '>' '{' '}'")
def test_border_shorthands_valid_initial_values(self):
node = TestNode(style=CSS())
node.layout.dirty = None
for property_name in ['border', 'border_bottom', 'border_left', 'border_right', 'border_top']:
self.assertEqual(str(getattr(node.style, property_name)), '')
def test_collapsed_margins(self):
child1 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10, margin=10),
)
child2 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10, margin=30),
)
child3 = TestNode(
name='div',
style=CSS(display=BLOCK, height=10, margin=20),
)
root = TestNode(name='div',
style=CSS(display=BLOCK),
children=[child1, child2, child3])
layout(self.display, root)
self.assertLayout(
root, {
'tag':
'div',
'border_box': {
'position': (0, 10),
'size': (1024, 738)
},
'padding_box': {
'position': (0, 10),
'size': (1024, 738)
},
'content': {
'position': (0, 10),
'size': (1024, 738)
},
'children': [{
'tag': 'div',
'border_box': {
'position': (10, 10),
'size': (1004, 10)
},
'padding_box': {
'position': (10, 10),
'size': (1004, 10)
},
'content': {
'position': (10, 10),
'size': (1004, 10)
},
}, {
'tag': 'div',
'border_box': {
'position': (30, 50),
'size': (964, 10)
},
'padding_box': {
'position': (30, 50),
'size': (964, 10)
},
'content': {
'position': (30, 50),
'size': (964, 10)
},
}, {
'tag': 'div',
'border_box': {
'position': (20, 90),
'size': (984, 10)
},
'padding_box': {
'position': (20, 90),
'size': (984, 10)
},
'content': {
'position': (20, 90),
'size': (984, 10)
},
}],
})
def test_engine(self):
node = TestNode(style=CSS())
self.assertEqual(node.style.engine(), css_engine)
