⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 217522 in webkit


Ignore:
Timestamp:
May 27, 2017, 10:13:58 AM (9 years ago)
Author:
Simon Fraser
Message:

getComputedStyle returns percentage values for left / right / top / bottom
​https://bugs.webkit.org/show_bug.cgi?id=29084

Reviewed by Zalan Bujtas.
LayoutTests/imported/w3c:

New baselines (still failing).

  • web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt:
  • web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt:

Source/WebCore:

Fix getComputedStyle() to return pixel values for left / right / top / bottom, per spec.

This is mostly a merge of ​https://codereview.chromium.org/13871003/.

Behavior now matches Chrome and Firefox.

Test: fast/css/getComputedStyle/getComputedStyle-offsets.html

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::getOffsetComputedLength):
(WebCore::getOffsetUsedStyleRelative):
(WebCore::getOffsetUsedStyleAbsolute):
(WebCore::positionOffsetValue):
(WebCore::positionOffsetValueIsRendererDependent):
(WebCore::isNonReplacedInline):
(WebCore::isLayoutDependent):
(WebCore::ComputedStyleExtractor::propertyValue):

LayoutTests:

Some new baselines, a new test, and an improved test.

  • animations/trigger-container-scroll-boundaries-expected.txt:
  • animations/trigger-container-scroll-boundaries.html:
  • animations/trigger-container-scroll-empty-expected.txt:
  • animations/trigger-container-scroll-empty.html:
  • animations/trigger-container-scroll-simple-expected.txt:
  • animations/trigger-container-scroll-simple.html:
  • fast/css/getComputedStyle/computed-style-expected.txt:
  • fast/css/getComputedStyle/computed-style-negative-top-expected.txt:
  • fast/css/getComputedStyle/computed-style-negative-top.html: Convert to a real JS test, add more cases.
  • fast/css/getComputedStyle/getComputedStyle-offsets-expected.txt: Added.
  • fast/css/getComputedStyle/getComputedStyle-offsets.html: Added.
  • fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size-expected.txt:
  • fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size.html: It doesn't make any sense to test right/bottom.
  • fast/css/hover-affects-child-expected.txt:
  • fast/css/hover-affects-child.html:
  • platform/mac-elcapitan/fast/css/getComputedStyle/computed-style-expected.txt:
  • transitions/transition-to-from-auto-expected.txt:
  • transitions/transition-to-from-auto.html:
Location:
trunk
Files:
4 added
22 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r217519 r217522  
     12017-05-27  Simon Fraser  <simon.fraser@apple.com>
     2
     3        getComputedStyle returns percentage values for left / right / top / bottom
     4        https://bugs.webkit.org/show_bug.cgi?id=29084
     5
     6        Reviewed by Zalan Bujtas.
     7
     8        Some new baselines, a new test, and an improved test.
     9
     10        * animations/trigger-container-scroll-boundaries-expected.txt:
     11        * animations/trigger-container-scroll-boundaries.html:
     12        * animations/trigger-container-scroll-empty-expected.txt:
     13        * animations/trigger-container-scroll-empty.html:
     14        * animations/trigger-container-scroll-simple-expected.txt:
     15        * animations/trigger-container-scroll-simple.html:
     16        * fast/css/getComputedStyle/computed-style-expected.txt:
     17        * fast/css/getComputedStyle/computed-style-negative-top-expected.txt:
     18        * fast/css/getComputedStyle/computed-style-negative-top.html: Convert to a real JS test, add more cases.
     19        * fast/css/getComputedStyle/getComputedStyle-offsets-expected.txt: Added.
     20        * fast/css/getComputedStyle/getComputedStyle-offsets.html: Added.
     21        * fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size-expected.txt:
     22        * fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size.html:  It doesn't make any sense to test right/bottom.
     23        * fast/css/hover-affects-child-expected.txt:
     24        * fast/css/hover-affects-child.html:
     25        * platform/mac-elcapitan/fast/css/getComputedStyle/computed-style-expected.txt:
     26        * transitions/transition-to-from-auto-expected.txt:
     27        * transitions/transition-to-from-auto.html:
     28
    1292017-05-26  Youenn Fablet  <youenn@apple.com>
    230

  • trunk/LayoutTests/animations/trigger-container-scroll-boundaries-expected.txt

    r181778 r217522  
    11This element should begin animating only when the page scrolls to 20px from the top. It then animates smoothly, moving 100px to the left over the next 100px of scrolling. Remember to scroll to the top of the page before reloading!
    22
    3 PASS: Value before animation is applied is auto
     3PASS: Value before animation is applied is 0px
    44PASS: Value with animation but no scroll was 0px
    55PASS: Value with scroll amount of 10 was 10px

  • trunk/LayoutTests/animations/trigger-container-scroll-boundaries.html

    r209409 r217522  
    4949    box = document.getElementById("box");
    5050    var leftValue = window.getComputedStyle(box).left;
    51     if (leftValue == "auto")
    52         results.innerHTML = "PASS: Value before animation is applied is auto<br>";
     51    if (leftValue == "0px")
     52        results.innerHTML = "PASS: Value before animation is applied is 0px<br>";
    5353    else
    5454        results.innerHTML = "FAIL: Value before animation is applied should be auto, was " + leftValue + "<br>";

  • trunk/LayoutTests/animations/trigger-container-scroll-empty-expected.txt

    r181778 r217522  
    11This element should begin animating only when the page scrolls to 20px from the top. It specifies an end value, but that should be ignored because it is not greater than the start. This means the animation will run to completion rather than take the scroll value as input. Remember to scroll to the top of the page before reloading!
    22
    3 Value before animation is applied: auto (should be auto)
     3Value before animation is applied: 0px (should be 0px)
    44Value with animation but no scroll: 0px (should be 0px)
    55PASS: Animation was not depending on scroll.

  • trunk/LayoutTests/animations/trigger-container-scroll-empty.html

    r209409 r217522  
    4545    results = document.getElementById("results");
    4646    box = document.getElementById("box");
    47     results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be auto)<br>";
     47    results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be 0px)<br>";
    4848    box.className = "animating";
    4949    setTimeout(checkValueWithoutScroll, 0);

  • trunk/LayoutTests/animations/trigger-container-scroll-simple-expected.txt

    r181655 r217522  
    11This element should begin animating only when the page scrolls to 20px from the top. The animation is almost instantaneous, so it will snap to its final position. Remember to scroll to the top of the page before reloading!
    22
    3 Value before animation is applied: auto (should be auto)
     3Value before animation is applied: 0px (should be 0px)
    44Value with animation but no scroll: 0px (should be 0px)
    55Value with animation after scroll: 100px (should be 100px)

  • trunk/LayoutTests/animations/trigger-container-scroll-simple.html

    r209409 r217522  
    4545    results = document.getElementById("results");
    4646    box = document.getElementById("box");
    47     results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be auto)<br>";
     47    results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be 0px)<br>";
    4848    box.className = "animating";
    4949    setTimeout(checkValueWithoutScroll, 0);

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt

    r214394 r217522  
    3131border-top-style: none;
    3232border-top-width: 0px;
    33 bottom: auto;
     33bottom: 16px;
    3434box-shadow: none;
    3535box-sizing: content-box;
    … …  
    5555height: 576px;
    5656image-rendering: auto;
    57 left: auto;
     57left: -8px;
    5858letter-spacing: normal;
    5959line-height: 18px;
    … …  
    9090position: static;
    9191resize: none;
    92 right: auto;
     92right: 8px;
    9393speak: normal;
    9494table-layout: auto;
    … …  
    101101text-overflow: clip;
    102102text-transform: none;
    103 top: auto;
     103top: -8px;
    104104transform: none;
    105105transform-origin: 392px 288px;

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-negative-top-expected.txt

    r41464 r217522  
    1 Test succeeded! Top is -1px.
     1Test computed offsets on elements with negative top and left.
     2
     3On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
     4
     5
     6
     7With no height
     8PASS style.top is '-1px'
     9PASS style.left is '-2px'
     10PASS style.bottom is '1px'
     11PASS style.right is '2px'
     12
     13With height:100%;
     14PASS style.top is '-1px'
     15PASS style.left is '-2px'
     16PASS style.bottom is '1px'
     17PASS style.right is '2px'
     18
     19With height:auto;
     20PASS style.top is '-1px'
     21PASS style.left is '-2px'
     22PASS style.bottom is '1px'
     23PASS style.right is '2px'
     24PASS successfullyParsed is true
     25
     26TEST COMPLETE
     27

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-negative-top.html

    r120683 r217522  
     1<!DOCTYPE html>
     2<html>
     3<head>
     4<script src="../../../resources/js-test-pre.js"></script>
     5</head>
     6<body>
     7<body>
     8    <div id="testContainer1" style="width: 100px; height: 200px;">
     9        <div id="test1" style="position:relative; top:-1px; left:-2px;"></div>
     10    </div>
     11
     12    <div id="testContainer2" style="width: 100px; height: 200px;">
     13        <div id="test2" style="position:relative; top:-1px; left:-2px; height:100%;"></div>
     14    </div>
     15
     16    <div id="testContainer3" style="width: 100px; height: 200px;">
     17        <div id="test3" style="position:relative; top:-1px; left:-2px; height:auto;"></div>
     18    </div>
     19
    120<script>
    2 function test() {
    3     if (window.testRunner)
    4         testRunner.dumpAsText();
    5     var style = document.defaultView.getComputedStyle(document.getElementById("test"), "");
    6     var result = document.getElementById("result");
    7     if (style.top == "-1px")
    8         result.appendChild(document.createTextNode("Test succeeded! Top is " + style.top + "."));
    9     else
    10         result.appendChild(document.createTextNode("Test failed! Top is " + style.top + "."));
     21description("Test computed offsets on elements with negative top and left.")
     22
     23var test = document.getElementById('test');
     24var style;
     25
     26function testStyle(name)
     27{
     28    debug('');
     29    debug(name);
     30    shouldBe("style.top", "'-1px'");
     31    shouldBe("style.left", "'-2px'");
     32    shouldBe("style.bottom", "'1px'");
     33    shouldBe("style.right", "'2px'");
    1134}
     35
     36style = document.defaultView.getComputedStyle(document.getElementById("test1"), "");
     37testStyle("With no height");
     38
     39style = document.defaultView.getComputedStyle(document.getElementById("test2"), "");
     40testStyle("With height:100%;");
     41
     42style = document.defaultView.getComputedStyle(document.getElementById("test3"), "");
     43testStyle("With height:auto;");
     44
    1245</script>
    13 <body onload="test()">
    14 <div id="test" style="position:relative; top:-1px"></div>
    15 <div id="result"></div>
     46
     47<script src="../../../resources/js-test-post.js"></script>
    1648</body>

  • trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size-expected.txt

    r107301 r217522  
    3535left    PASS    20px    20px
    3636top     PASS    20px    20px
    37 right   PASS    50px    50px
    38 bottom  PASS    50px    50px
    3937font-size       PASS    20px    20px
    4038width   PASS    400px   400px
    … …  
    9088left    PASS    20px    20px
    9189top     PASS    20px    20px
    92 right   PASS    50px    50px
    93 bottom  PASS    50px    50px
    9490font-size       PASS    20px    20px
    9591width   PASS    400px   400px

  • trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-zoom-and-background-size.html

    r120683 r217522  
    138138      "left": "20px",
    139139      "top": "20px",
    140       "right": "50px",
    141       "bottom": "50px",
    142140     
    143141      "font-size": "20px",

  • trunk/LayoutTests/fast/css/hover-affects-child-expected.txt

    r30635 r217522  
    11This tests that a style that affects child elements when hovering over a parent element correctly recalculates the child style. To test manually move the mouse over the red square, it should become green.
    2 PASSED: Calculated style of inner element is correct
     2FAILED: Calculated style of inner element is wrong, should be 'left: 0px'

  • trunk/LayoutTests/fast/css/hover-affects-child.html

    r120683 r217522  
    3333                var calculatedStyle = window.getComputedStyle(innerElem);
    3434   
    35                 if (calculatedStyle.getPropertyValue('left') == "auto")
     35                if (calculatedStyle.getPropertyValue('left') == "0px")
    3636                    log("PASSED: Calculated style of inner element is correct");
    3737                else
    38                     log("FAILED: Calculated style of inner element is wrong, should be 'left: auto'");
     38                    log("FAILED: Calculated style of inner element is wrong, should be 'left: 0px'");
    3939            }
    4040       

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r217486 r217522  
     12017-05-27  Simon Fraser  <simon.fraser@apple.com>
     2
     3        getComputedStyle returns percentage values for left / right / top / bottom
     4        https://bugs.webkit.org/show_bug.cgi?id=29084
     5
     6        Reviewed by Zalan Bujtas.
     7       
     8        New baselines (still failing).
     9
     10        * web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt:
     11        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt:
     12
    1132017-05-26  Manuel Rego Casasnovas  <rego@igalia.com>
    214

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css-timing-1/frames-timing-functions-output-expected.txt

    r215852 r217522  
    11
    2 FAIL For an input progress of 0.0, the output of a frames timing function is the first frame assert_equals: expected "0px" but got "auto"
    3 FAIL At a frame boundary, the output of a frames timing function is the next frame assert_equals: expected "0px" but got "auto"
    4 FAIL For an input progress of 1.0, the output of a frames timing function is the final frame assert_equals: expected "100px" but got "auto"
    5 FAIL The number of frames is correctly reflected in the frames timing function output assert_equals: expected "0px" but got "auto"
    6 FAIL The number of frames is correctly reflected in the frames timing function output on CSS Transitions assert_equals: expected "0px" but got "auto"
     2FAIL For an input progress of 0.0, the output of a frames timing function is the first frame assert_equals: expected "0px" but got "8px"
     3FAIL At a frame boundary, the output of a frames timing function is the next frame assert_equals: expected "0px" but got "8px"
     4FAIL For an input progress of 1.0, the output of a frames timing function is the final frame assert_equals: expected "100px" but got "8px"
     5FAIL The number of frames is correctly reflected in the frames timing function output assert_equals: expected "0px" but got "8px"
     6FAIL The number of frames is correctly reflected in the frames timing function output on CSS Transitions assert_equals: expected "0px" but got "8px"
    77FAIL frames easing with input progress greater than 1 undefined is not a function (near '...target.animate...')
    88FAIL frames easing with input progress greater than 1.5 undefined is not a function (near '...target.animate...')

  • trunk/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt

    r215164 r217522  
    2323FAIL vertical-lr: tall viewport assert_equals: expected "10px" but got "auto"
    2424FAIL vertical-lr: dialog bigger than viewport assert_equals: expected "0px" but got "auto"
    25 FAIL vertical-rl (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "auto"
    26 FAIL vertical-lr (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "auto"
    27 FAIL vertical-lr (dialog horizontal-tb): dialog bigger than viewport assert_equals: expected "0px" but got "auto"
     25FAIL vertical-rl (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "12px"
     26FAIL vertical-lr (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "-8px"
     27FAIL vertical-lr (dialog horizontal-tb): dialog bigger than viewport assert_equals: expected "0px" but got "-8px"
    2828FAIL horizontal-tb (container vertical-rl): tall viewport assert_equals: expected "10px" but got "auto"
    2929FAIL vertical-rl (container horizontal-tb): tall viewport assert_equals: expected "45px" but got "auto"
    30 FAIL horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "auto"
    31 FAIL vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport assert_equals: expected "45px" but got "auto"
     30FAIL horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "-8px"
     31FAIL vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport assert_equals: expected "45px" but got "12px"
    3232

  • trunk/LayoutTests/platform/ios/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/centering-expected.txt

    r217521 r217522  
    2323FAIL vertical-lr: tall viewport assert_equals: expected "10px" but got "auto"
    2424FAIL vertical-lr: dialog bigger than viewport assert_equals: expected "0px" but got "auto"
    25 FAIL vertical-rl (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "auto"
    26 FAIL vertical-lr (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "auto"
    27 FAIL vertical-lr (dialog horizontal-tb): dialog bigger than viewport assert_equals: expected "0px" but got "auto"
     25FAIL vertical-rl (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "13px"
     26FAIL vertical-lr (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "-7px"
     27FAIL vertical-lr (dialog horizontal-tb): dialog bigger than viewport assert_equals: expected "0px" but got "-7px"
    2828FAIL horizontal-tb (container vertical-rl): tall viewport assert_equals: expected "10px" but got "auto"
    2929FAIL vertical-rl (container horizontal-tb): tall viewport assert_equals: expected "45px" but got "auto"
    30 FAIL horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "auto"
    31 FAIL vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport assert_equals: expected "45px" but got "auto"
     30FAIL horizontal-tb (container vertical-rl) (dialog horizontal-tb): tall viewport assert_equals: expected "10px" but got "-8px"
     31FAIL vertical-rl (container horizontal-tb) (dialog vertical-rl): tall viewport assert_equals: expected "45px" but got "13px"
    3232

  • trunk/LayoutTests/platform/mac-elcapitan/fast/css/getComputedStyle/computed-style-expected.txt

    r214394 r217522  
    3131border-top-style: none;
    3232border-top-width: 0px;
    33 bottom: auto;
     33bottom: 16px;
    3434box-shadow: none;
    3535box-sizing: content-box;
    … …  
    5454height: 576px;
    5555image-rendering: auto;
    56 left: auto;
     56left: -8px;
    5757letter-spacing: normal;
    5858line-height: 18px;
    … …  
    8989position: static;
    9090resize: none;
    91 right: auto;
     91right: 8px;
    9292speak: normal;
    9393table-layout: auto;
    … …  
    100100text-overflow: clip;
    101101text-transform: none;
    102 top: auto;
     102top: -8px;
    103103transform: none;
    104104transform-origin: 392px 288px;

  • trunk/LayoutTests/transitions/transition-to-from-auto-expected.txt

    r200360 r217522  
    1 PASS - "left" property for "test1" element at 1s saw something close to: auto
     1PASS - "left" property for "test1" element at 1s saw something close to: 0
    22PASS - "left" property for "test2" element at 1s saw something close to: 100
    33PASS - "left" property for "test3" element at 1s saw something close to: 50

  • trunk/LayoutTests/transitions/transition-to-from-auto.html

    r200360 r217522  
    4242    const expectedValues = [
    4343      // [time, element-id, property, expected-value, tolerance]
    44       [1, 'test1', 'left', 'auto', 2],
     44      [1, 'test1', 'left', '0', 2],
    4545      [1, 'test2', 'left', '100', 2],
    4646      [1, 'test3', 'left', '50', 2],

  • trunk/Source/WebCore/ChangeLog

    r217521 r217522  
     12017-05-26  Simon Fraser  <simon.fraser@apple.com>
     2
     3        getComputedStyle returns percentage values for left / right / top / bottom
     4        https://bugs.webkit.org/show_bug.cgi?id=29084
     5
     6        Reviewed by Zalan Bujtas.
     7       
     8        Fix getComputedStyle() to return pixel values for left / right / top / bottom, per spec.
     9
     10        This is mostly a merge of https://codereview.chromium.org/13871003/.
     11
     12        Behavior now matches Chrome and Firefox.
     13
     14        Test: fast/css/getComputedStyle/getComputedStyle-offsets.html
     15
     16        * css/CSSComputedStyleDeclaration.cpp:
     17        (WebCore::getOffsetComputedLength):
     18        (WebCore::getOffsetUsedStyleRelative):
     19        (WebCore::getOffsetUsedStyleAbsolute):
     20        (WebCore::positionOffsetValue):
     21        (WebCore::positionOffsetValueIsRendererDependent):
     22        (WebCore::isNonReplacedInline):
     23        (WebCore::isLayoutDependent):
     24        (WebCore::ComputedStyleExtractor::propertyValue):
     25
    1262017-05-27  Zalan Bujtas  <zalan@apple.com>
    227

  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r217272 r217522  
    709709}
    710710
    711 static RefPtr<CSSValue> positionOffsetValue(const RenderStyle& style, CSSPropertyID propertyID)
    712 {
    713     Length length;
     711static Length getOffsetComputedLength(const RenderStyle& style, CSSPropertyID propertyID)
     712{
     713    // If specified as a length, the corresponding absolute length; if specified as
     714    // a percentage, the specified value; otherwise, 'auto'. Hence, we can just
     715    // return the value in the style.
     716    //
     717    // See http://www.w3.org/TR/CSS21/cascade.html#computed-value
    714718    switch (propertyID) {
    715         case CSSPropertyLeft:
    716             length = style.left();
    717             break;
    718         case CSSPropertyRight:
    719             length = style.right();
    720             break;
    721         case CSSPropertyTop:
    722             length = style.top();
    723             break;
    724         case CSSPropertyBottom:
    725             length = style.bottom();
    726             break;
    727         default:
    728             return nullptr;
    729     }
    730 
    731     if (style.hasOutOfFlowPosition()) {
    732         if (length.isFixed())
    733             return zoomAdjustedPixelValue(length.value(), style);
    734 
    735         return CSSValuePool::singleton().createValue(length);
    736     }
    737 
    738     if (style.hasInFlowPosition()) {
    739         // FIXME: It's not enough to simply return "auto" values for one offset if the other side is defined.
    740         // In other words if left is auto and right is not auto, then left's computed value is negative right().
    741         // So we should get the opposite length unit and see if it is auto.
    742         return CSSValuePool::singleton().createValue(length);
    743     }
    744 
    745     return CSSValuePool::singleton().createIdentifierValue(CSSValueAuto);
     719    case CSSPropertyLeft:
     720        return style.left();
     721    case CSSPropertyRight:
     722        return style.right();
     723    case CSSPropertyTop:
     724        return style.top();
     725    case CSSPropertyBottom:
     726        return style.bottom();
     727    default:
     728        ASSERT_NOT_REACHED();
     729    }
     730
     731    return { };
     732}
     733
     734static LayoutUnit getOffsetUsedStyleRelative(RenderBox& box, CSSPropertyID propertyID)
     735{
     736    // For relatively positioned boxes, the offset is with respect to the top edges
     737    // of the box itself. This ties together top/bottom and left/right to be
     738    // opposites of each other.
     739    //
     740    // See http://www.w3.org/TR/CSS2/visuren.html#relative-positioning
     741    //
     742    // Specifically;
     743    //   Since boxes are not split or stretched as a result of 'left' or
     744    //   'right', the used values are always: left = -right.
     745    // and
     746    //   Since boxes are not split or stretched as a result of 'top' or
     747    //   'bottom', the used values are always: top = -bottom.
     748    switch (propertyID) {
     749    case CSSPropertyTop:
     750        return box.relativePositionOffset().height();
     751    case CSSPropertyBottom:
     752        return -(box.relativePositionOffset().height());
     753    case CSSPropertyLeft:
     754        return box.relativePositionOffset().width();
     755    case CSSPropertyRight:
     756        return -(box.relativePositionOffset().width());
     757    default:
     758        ASSERT_NOT_REACHED();
     759    }
     760
     761    return 0;
     762}
     763
     764static LayoutUnit getOffsetUsedStyleAbsolute(RenderBlock& container, RenderBox& box, CSSPropertyID propertyID)
     765{
     766    // For absoultely positioned boxes, the offset is how far an box's margin
     767    // edge is offset below the edge of the box's containing block.
     768    // See http://www.w3.org/TR/CSS2/visuren.html#position-props
     769
     770    // Margins are included in offsetTop/offsetLeft so we need to remove them here.
     771    switch (propertyID) {
     772    case CSSPropertyTop:
     773        return box.offsetTop() - box.marginTop();
     774    case CSSPropertyBottom:
     775        return container.clientHeight() - (box.offsetTop() + box.offsetHeight()) - box.marginBottom();
     776    case CSSPropertyLeft:
     777        return box.offsetLeft() - box.marginLeft();
     778    case CSSPropertyRight:
     779        return container.clientWidth() - (box.offsetLeft() + box.offsetWidth()) - box.marginRight();
     780    default:
     781        ASSERT_NOT_REACHED();
     782    }
     783
     784    return 0;
     785}
     786
     787static RefPtr<CSSValue> positionOffsetValue(const RenderStyle& style, CSSPropertyID propertyID, RenderObject* renderer)
     788{
     789    // If the element is not displayed; return the "computed value".
     790    if (!renderer || !renderer->isBox())
     791        return zoomAdjustedPixelValueForLength(getOffsetComputedLength(style, propertyID), style);
     792
     793    // We should return the "used value".
     794    LayoutUnit length = 0;
     795    auto& box = downcast<RenderBox>(*renderer);
     796    RenderBlock* containingBlock = box.containingBlock();
     797    if (box.isRelPositioned() || !containingBlock)
     798        length = getOffsetUsedStyleRelative(box, propertyID);
     799    else
     800        length = getOffsetUsedStyleAbsolute(*containingBlock, box, propertyID);
     801       
     802    return zoomAdjustedPixelValue(length, style);
    746803}
    747804
    … …  
    22002257}
    22012258
     2259static bool positionOffsetValueIsRendererDependent(const RenderStyle* style, RenderObject* renderer)
     2260{
     2261    return renderer && style && renderer->isBox();
     2262}
     2263
    22022264static CSSValueID convertToPageBreak(BreakBetween value)
    22032265{
    … …  
    22502312}
    22512313#endif
    2252    
     2314
     2315static inline bool isNonReplacedInline(RenderObject& renderer)
     2316{
     2317    return renderer.isInline() && !renderer.isReplaced();
     2318}
     2319
    22532320static bool isLayoutDependent(CSSPropertyID propertyID, const RenderStyle* style, RenderObject* renderer)
    22542321{
    22552322    switch (propertyID) {
     2323    case CSSPropertyTop:
     2324    case CSSPropertyBottom:
     2325    case CSSPropertyLeft:
     2326    case CSSPropertyRight:
     2327        return positionOffsetValueIsRendererDependent(style, renderer);
    22562328    case CSSPropertyWidth:
    22572329    case CSSPropertyHeight:
     2330        return renderer && !renderer->isRenderSVGModelObject() && !isNonReplacedInline(*renderer);
    22582331    case CSSPropertyPerspectiveOrigin:
    22592332    case CSSPropertyTransformOrigin:
    22602333    case CSSPropertyTransform:
    2261     case CSSPropertyFilter:
     2334    case CSSPropertyFilter: // Why are filters layout-dependent?
    22622335#if ENABLE(FILTERS_LEVEL_2)
    2263     case CSSPropertyWebkitBackdropFilter:
     2336    case CSSPropertyWebkitBackdropFilter: // Ditto for backdrop-filter.
    22642337#endif
    22652338        return true;
    … …  
    23722445}
    23732446
     2447// In CSS 2.1 the returned object should actually contain the "used values"
     2448// rather then the "computed values" (despite the name saying otherwise).
     2449//
     2450// See;
     2451// http://www.w3.org/TR/CSS21/cascade.html#used-value
     2452// http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
     2453// https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#Notes
    23742454RefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(CSSPropertyID propertyID, EUpdateLayout updateLayout) const
    23752455{
    … …  
    28302910            return zoomAdjustedPixelValue(style->borderLeftWidth(), *style);
    28312911        case CSSPropertyBottom:
    2832             return positionOffsetValue(*style, CSSPropertyBottom);
     2912            return positionOffsetValue(*style, CSSPropertyBottom, renderer);
    28332913        case CSSPropertyWebkitBoxAlign:
    28342914            return cssValuePool.createValue(style->boxAlign());
    … …  
    30783158                // According to http://www.w3.org/TR/CSS2/visudet.html#the-height-property,
    30793159                // the "height" property does not apply for non-replaced inline elements.
    3080                 if (!renderer->isReplaced() && renderer->isInline())
     3160                if (isNonReplacedInline(*renderer))
    30813161                    return cssValuePool.createIdentifierValue(CSSValueAuto);
    30823162                return zoomAdjustedPixelValue(sizingBox(*renderer).height(), *style);
    … …  
    31163196#endif
    31173197        case CSSPropertyLeft:
    3118             return positionOffsetValue(*style, CSSPropertyLeft);
     3198            return positionOffsetValue(*style, CSSPropertyLeft, renderer);
    31193199        case CSSPropertyLetterSpacing:
    31203200            if (!style->letterSpacing())
    … …  
    32543334            return cssValuePool.createValue(style->position());
    32553335        case CSSPropertyRight:
    3256             return positionOffsetValue(*style, CSSPropertyRight);
     3336            return positionOffsetValue(*style, CSSPropertyRight, renderer);
    32573337        case CSSPropertyWebkitRubyPosition:
    32583338            return cssValuePool.createValue(style->rubyPosition());
    … …  
    33543434            return cssValuePool.createValue(style->textTransform());
    33553435        case CSSPropertyTop:
    3356             return positionOffsetValue(*style, CSSPropertyTop);
     3436            return positionOffsetValue(*style, CSSPropertyTop, renderer);
    33573437        case CSSPropertyUnicodeBidi:
    33583438            return cssValuePool.createValue(style->unicodeBidi());
    … …  
    33943474                // According to http://www.w3.org/TR/CSS2/visudet.html#the-width-property,
    33953475                // the "width" property does not apply for non-replaced inline elements.
    3396                 if (!renderer->isReplaced() && renderer->isInline())
     3476                if (isNonReplacedInline(*renderer))
    33973477                    return cssValuePool.createIdentifierValue(CSSValueAuto);
    33983478                return zoomAdjustedPixelValue(sizingBox(*renderer).width(), *style);
Note: See TracChangeset for help on using the changeset viewer.