Auto merge of #8111 - gilles-leblanc:issue-8002, r=SimonSapin

Compute value of float according to position value

According to CSS2 Section 9.7, if 'position' has a value of 'absolute'
or 'fixed' the computed value of 'float' should be 'none'.

This changes the float to a single_keyword_computed which checks the
positioned value of the element to compute the float value.

Fixes #8002

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/8111)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-11-03 21:39:32 +05:30
commit 5070c873d0
3 changed files with 65 additions and 1 deletions

View file

@ -546,7 +546,25 @@ pub mod longhands {
</%self:longhand>
${single_keyword("position", "static absolute relative fixed")}
${single_keyword("float", "none left right")}
<%self:single_keyword_computed name="float" values="none left right">
use values::computed::Context;
impl ToComputedValue for SpecifiedValue {
type ComputedValue = computed_value::T;
#[inline]
fn to_computed_value(&self, context: &Context) -> computed_value::T {
if context.positioned {
SpecifiedValue::none
} else {
*self
}
}
}
</%self:single_keyword_computed>
${single_keyword("clear", "none left right both")}
<%self:longhand name="-servo-display-for-hypothetical-box" derived_from="display">

View file

@ -4165,6 +4165,12 @@
]
},
"testharness": {
"css/float_relative_to_position.html": [
{
"path": "css/float_relative_to_position.html",
"url": "/_mozilla/css/float_relative_to_position.html"
}
],
"css/test_variable_legal_values.html": [
{
"path": "css/test_variable_legal_values.html",

View file

@ -0,0 +1,40 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Tests the relationship between float and position</title>
<style>
div {
float: left;
}
</style>
<head>
<body>
<div></div>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<script>
test(function() {
var computed_style = getComputedStyle(document.querySelector("div"))["float"];
assert_equals(computed_style, "left");
document.querySelector("div").setAttribute("style", "position: fixed;");
computed_style = getComputedStyle(document.querySelector("div"))["float"];
assert_equals(computed_style, "none");
document.querySelector("div").setAttribute("style", "position: absolute;");
computed_style = getComputedStyle(document.querySelector("div"))["float"];
assert_equals(computed_style, "none");
document.querySelector("div").removeAttribute("style");
computed_style = getComputedStyle(document.querySelector("div"))["float"];
assert_equals(computed_style, "left");
});
</script>
</body>
</html>