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
This commit is contained in:
Gilles Leblanc 2015-10-21 22:43:37 -04:00
parent 354e75a447
commit 725484d619
3 changed files with 52 additions and 1 deletions

View file

@ -546,7 +546,25 @@ pub mod longhands {
</%self:longhand> </%self:longhand>
${single_keyword("position", "static absolute relative fixed")} ${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")} ${single_keyword("clear", "none left right both")}
<%self:longhand name="-servo-display-for-hypothetical-box" derived_from="display"> <%self:longhand name="-servo-display-for-hypothetical-box" derived_from="display">

View file

@ -3961,6 +3961,12 @@
] ]
}, },
"testharness": { "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": [ "css/test_variable_legal_values.html": [
{ {
"path": "css/test_variable_legal_values.html", "path": "css/test_variable_legal_values.html",

View file

@ -0,0 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Tests the relationship between float and position</title>
<head>
<body>
<div style="position: fixed; float: left"></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, "none");
document.querySelector("div").setAttribute("position", "absolute");
computed_style = getComputedStyle(document.querySelector("div"))["float"];
assert_equals(computed_style, "none");
});
<!-- test(); -->
</script>
</body>
</html>