Changeset 244848 in webkit


Ignore:
Timestamp:
May 1, 2019 1:46:20 PM (5 years ago)
Author:
Alan Bujtas
Message:

[iOS] Star rating is covered with a black circle when writing a review on Yelp
https://bugs.webkit.org/show_bug.cgi?id=197469
<rdar://problem/48094446>

Reviewed by Dean Jackson.

Source/WebCore:

This patch moves the background painting of the radio/checkbox form controls in checked state to RenderTheme.
It enables content authors to disable default appearance using -webkit-appearance: none (it is also inline with what we do on macOS).

Test: fast/forms/radio-and-checkbox-checked-with-no-appearance.html

  • css/html.css:

(input:matches([type="checkbox"], [type="radio"]):checked):

  • rendering/RenderThemeIOS.mm:

(WebCore::RenderThemeIOS::paintCheckboxDecorations):
(WebCore::RenderThemeIOS::paintRadioDecorations):

LayoutTests:

  • fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html: Added.
  • fast/forms/radio-and-checkbox-checked-with-no-appearance.html: Added.
Location:
trunk
Files:
2 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r244844 r244848  
     12019-05-01  Zalan Bujtas  <zalan@apple.com>
     2
     3        [iOS] Star rating is covered with a black circle when writing a review on Yelp
     4        https://bugs.webkit.org/show_bug.cgi?id=197469
     5        <rdar://problem/48094446>
     6
     7        Reviewed by Dean Jackson.
     8
     9        * fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html: Added.
     10        * fast/forms/radio-and-checkbox-checked-with-no-appearance.html: Added.
     11
    1122019-05-01  Ryan Haddad  <ryanhaddad@apple.com>
    213
  • trunk/Source/WebCore/ChangeLog

    r244837 r244848  
     12019-05-01  Zalan Bujtas  <zalan@apple.com>
     2
     3        [iOS] Star rating is covered with a black circle when writing a review on Yelp
     4        https://bugs.webkit.org/show_bug.cgi?id=197469
     5        <rdar://problem/48094446>
     6
     7        Reviewed by Dean Jackson.
     8
     9        This patch moves the background painting of the radio/checkbox form controls in checked state to RenderTheme.
     10        It enables content authors to disable default appearance using -webkit-appearance: none (it is also inline with what we do on macOS).
     11
     12        Test: fast/forms/radio-and-checkbox-checked-with-no-appearance.html
     13
     14        * css/html.css:
     15        (input:matches([type="checkbox"], [type="radio"]):checked):
     16        * rendering/RenderThemeIOS.mm:
     17        (WebCore::RenderThemeIOS::paintCheckboxDecorations):
     18        (WebCore::RenderThemeIOS::paintRadioDecorations):
     19
    1202019-05-01  Said Abou-Hallawa  <sabouhallawa@apple.com>
    221
  • trunk/Source/WebCore/css/html.css

    r244731 r244848  
    887887
    888888input:matches([type="checkbox"], [type="radio"]):checked {
    889     background: rgba(0, 0, 0, 0.8);
    890889    border-color: rgba(255, 255, 255, 0.0);
    891890}
  • trunk/Source/WebCore/rendering/RenderThemeIOS.mm

    r244554 r244848  
    386386    bool indeterminate = isIndeterminate(box);
    387387    CGContextRef cgContext = paintInfo.context().platformContext();
    388 
    389388    GraphicsContextStateSaver stateSaver { paintInfo.context() };
    390     auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
    391     float width = clip.width();
    392     float height = clip.height();
    393389
    394390    if (checked || indeterminate) {
     391        auto border = box.style().getRoundedBorderFor(rect);
     392        paintInfo.context().fillRoundedRect(border.pixelSnappedRoundedRectForPainting(box.document().deviceScaleFactor()), Color(0.0f, 0.0f, 0.0f, 0.8f));
     393
     394        auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
     395        auto width = clip.width();
     396        auto height = clip.height();
    395397        drawAxialGradient(cgContext, gradientWithName(ConcaveGradient), clip.location(), FloatPoint { clip.x(), clip.maxY() }, LinearInterpolation);
    396398
     
    426428        drawJoinedLines(cgContext, Vector<CGPoint> { WTFMove(shadow) }, kCGLineCapSquare, lineWidth, Color { 0.0f, 0.0f, 0.0f, 0.7f });
    427429
    428         lineWidth = std::max<float>(std::min(clip.width(), clip.height()) * thicknessRatio, 1);
     430        lineWidth = std::max<float>(std::min(width, height) * thicknessRatio, 1);
    429431        drawJoinedLines(cgContext, Vector<CGPoint> { WTFMove(line) }, kCGLineCapButt, lineWidth, Color { 1.0f, 1.0f, 1.0f, 240 / 255.0f });
    430432    } else {
    431         FloatPoint bottomCenter { clip.x() + clip.width() / 2.0f, clip.maxY() };
     433        auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
     434        auto width = clip.width();
     435        auto height = clip.height();
     436        FloatPoint bottomCenter { clip.x() + width / 2.0f, clip.maxY() };
    432437
    433438        drawAxialGradient(cgContext, gradientWithName(ShadeGradient), clip.location(), FloatPoint { clip.x(), clip.maxY() }, LinearInterpolation);
     
    472477{
    473478    GraphicsContextStateSaver stateSaver(paintInfo.context());
    474     FloatRect clip = addRoundedBorderClip(box, paintInfo.context(), rect);
    475 
    476479    CGContextRef cgContext = paintInfo.context().platformContext();
     480
     481    auto drawShadeAndShineGradients = [&](auto clip) {
     482        FloatPoint bottomCenter(clip.x() + clip.width() / 2.0, clip.maxY());
     483        drawAxialGradient(cgContext, gradientWithName(ShadeGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
     484        drawRadialGradient(cgContext, gradientWithName(ShineGradient), bottomCenter, 0, bottomCenter, std::max(clip.width(), clip.height()), ExponentialInterpolation);
     485    };
     486
    477487    if (isChecked(box)) {
     488        auto border = box.style().getRoundedBorderFor(rect);
     489        paintInfo.context().fillRoundedRect(border.pixelSnappedRoundedRectForPainting(box.document().deviceScaleFactor()), Color(0.0f, 0.0f, 0.0f, 0.8f));
     490
     491        auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
    478492        drawAxialGradient(cgContext, gradientWithName(ConcaveGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
    479493
     
    490504        FloatSize radius(clip.width() / 2.0f, clip.height() / 2.0f);
    491505        paintInfo.context().clipRoundedRect(FloatRoundedRect(clip, radius, radius, radius, radius));
    492     }
    493     FloatPoint bottomCenter(clip.x() + clip.width() / 2.0, clip.maxY());
    494     drawAxialGradient(cgContext, gradientWithName(ShadeGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
    495     drawRadialGradient(cgContext, gradientWithName(ShineGradient), bottomCenter, 0, bottomCenter, std::max(clip.width(), clip.height()), ExponentialInterpolation);
     506        drawShadeAndShineGradients(clip);
     507    } else {
     508        auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
     509        drawShadeAndShineGradients(clip);
     510    }
    496511    return false;
    497512}
Note: See TracChangeset for help on using the changeset viewer.