mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Added the ability to specify width by css
This commit is contained in:
parent
95d0998149
commit
2eb6f39be2
6 changed files with 87 additions and 13 deletions
|
@ -46,7 +46,7 @@ impl @Box : BlockLayoutMethods {
|
|||
let width = match self.appearance.width {
|
||||
Px(p) => px_to_au(p.to_int()),
|
||||
Auto => self.bounds.size.width, // Do nothing here, width was set by top-down pass
|
||||
_ => fail ~"inhereit_height failed, width is neither a Px or auto"
|
||||
_ => fail ~"inhereit_width failed, width is neither a Px or auto"
|
||||
};
|
||||
|
||||
self.bounds.size = Size2D(width, height);
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import dom::base::{ElementData, HTMLDivElement, HTMLImageElement, Element, Text, Node};
|
||||
import dom::style::{DisplayType, DisBlock, DisInline, DisNone};
|
||||
import gfx::geometry;
|
||||
import gfx::geometry::zero_size_au;
|
||||
import layout::base::{Appearance, BTree, BlockBox, Box, BoxKind, InlineBox, IntrinsicBox, NTree};
|
||||
import layout::base::{TextBoxKind};
|
||||
import layout::text::TextBox;
|
||||
|
@ -159,10 +159,17 @@ impl Node : PrivBoxBuilder {
|
|||
match self.read(|n| copy n.kind) {
|
||||
~Text(string) => TextBoxKind(@TextBox(copy string)),
|
||||
~Element(element) => {
|
||||
match *element.kind {
|
||||
HTMLDivElement => BlockBox,
|
||||
HTMLImageElement({size}) => IntrinsicBox(@size),
|
||||
UnknownElement => InlineBox
|
||||
match (copy *element.kind, self.get_specified_style().display_type) {
|
||||
(HTMLImageElement({size}), _) => IntrinsicBox(@size),
|
||||
(_, some(DisBlock)) => BlockBox,
|
||||
(_, some(DisInline)) => InlineBox,
|
||||
(_, some(DisNone)) => {
|
||||
// TODO: don't have a box here at all?
|
||||
IntrinsicBox(@zero_size_au())
|
||||
}
|
||||
(_, none) => {
|
||||
fail ~"The specified display style should be a default instead of none"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
#[doc="Inline layout."]
|
||||
|
||||
import base::{Box, InlineBox, BTree};
|
||||
import dom::rcu;
|
||||
import dom::style::{Auto, Px};
|
||||
import geom::point::Point2D;
|
||||
import geom::size::Size2D;
|
||||
import gfx::geometry::au;
|
||||
import gfx::geometry::{au, px_to_au};
|
||||
import num::num;
|
||||
import util::tree;
|
||||
import base::{Box, InlineBox, BTree};
|
||||
|
||||
trait InlineLayout {
|
||||
fn reflow_inline();
|
||||
|
@ -31,9 +33,20 @@ impl @Box : InlineLayout {
|
|||
current_height = int::max(current_height, *kid.bounds.size.height);
|
||||
}
|
||||
|
||||
let height = match self.appearance.height {
|
||||
Px(p) => px_to_au(p.to_int()),
|
||||
Auto => au(current_height),
|
||||
_ => fail ~"inhereit_height failed, height is neither a Px or auto"
|
||||
};
|
||||
|
||||
let width = match self.appearance.width {
|
||||
Px(p) => px_to_au(p.to_int()),
|
||||
Auto => au(int::max(x, *self.bounds.size.width)),
|
||||
_ => fail ~"inhereit_width failed, width is neither a Px or auto"
|
||||
};
|
||||
|
||||
// The maximum available width should have been set in the top-down pass
|
||||
self.bounds.size = Size2D(au(int::max(x, *self.bounds.size.width)),
|
||||
au(current_height));
|
||||
self.bounds.size = Size2D(width, height);
|
||||
|
||||
#debug["reflow_inline size=%?", copy self.bounds];
|
||||
}
|
||||
|
|
|
@ -18,6 +18,7 @@ trait ApplyStyleBoxMethods {
|
|||
fn inheritance_wrapper(box : @Box) {
|
||||
box.apply_style();
|
||||
inhereit_height(box);
|
||||
inhereit_width(box);
|
||||
}
|
||||
|
||||
#[doc="Compute the specified height of a layout box based on it's css specification and its
|
||||
|
@ -50,6 +51,36 @@ fn inhereit_height(box : @Box) {
|
|||
}
|
||||
}
|
||||
|
||||
#[doc="Compute the specified width of a layout box based on it's css specification and its
|
||||
parent's width."]
|
||||
fn inhereit_width(box : @Box) {
|
||||
let style = box.node.get_specified_style();
|
||||
|
||||
box.appearance.width = match style.width {
|
||||
none => Auto,
|
||||
some(h) => match h {
|
||||
Auto | Px(*) => h,
|
||||
Pt(*) => PtToPx(h),
|
||||
Mm(*) => MmToPx(h),
|
||||
Percent(em) => {
|
||||
match box.tree.parent {
|
||||
none => Auto,
|
||||
some(parent) => {
|
||||
match parent.appearance.width {
|
||||
//This is a poorly constrained case, so we ignore the percentage
|
||||
Auto => Auto,
|
||||
Px(f) => Px(em*f/100.0),
|
||||
Percent(*) | Mm(*) | Pt(*) => {
|
||||
fail ~"failed inheriting widths, parent should only be Px or Auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl @Box : ApplyStyleBoxMethods {
|
||||
fn apply_css_style() {
|
||||
top_down_traversal(self, inheritance_wrapper);
|
||||
|
|
13
src/test/compute_height_width.html
Normal file
13
src/test/compute_height_width.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<head>
|
||||
<link rel="stylesheet" href="height_width.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="start">
|
||||
<div class="whole"></div>
|
||||
<div class="half"></div>
|
||||
<div class="quarter"></div>
|
||||
<div class="eighth"></div>
|
||||
<div class="sixteenth"></div>
|
||||
<div class="thirtysecond"></div>
|
||||
</div>
|
||||
</body>
|
10
src/test/height_width.css
Normal file
10
src/test/height_width.css
Normal file
|
@ -0,0 +1,10 @@
|
|||
div {display : inline}
|
||||
div div {width : 120px}
|
||||
.start {background-color : gray; height : 500px}
|
||||
.whole {background-color : red; height : 100%}
|
||||
.half {background-color : rgb(250, 125, 0); height : 50%}
|
||||
.quarter {background-color : yellow; height : 25%}
|
||||
.eighth {background-color : green; height : 12.5%}
|
||||
.sixteenth {background-color : blue; height : 6.25%}
|
||||
.thirtysecond {background-color : purple; height : 3.125%}
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue