From 7eff53e2509c59ce42ec0a7f346d983efe622a5a Mon Sep 17 00:00:00 2001 From: Pyfisch Date: Wed, 2 May 2018 22:08:20 +0200 Subject: [PATCH] Implement border-image-outset Add an automatic test for border-image-outset with a gradient. Convert two tests from UTF-8 LE with CRLF line endings to UTF-8 with LF endings as the old files could not be viewed with servo. Closes #16638 --- components/layout/display_list/background.rs | 30 ++++++++++++++-- components/layout/display_list/builder.rs | 32 +++++++++++------- tests/wpt/metadata/MANIFEST.json | 29 ++++++++++++++-- .../background-size-025.html.ini | 2 -- .../border-image-outset-001.htm | Bin 3582 -> 1754 bytes .../border-image-outset-002.htm | Bin 3730 -> 1820 bytes .../border-image-outset-003-ref.html | 23 +++++++++++++ .../border-image-outset-003.html | 22 ++++++++++++ 8 files changed, 119 insertions(+), 19 deletions(-) delete mode 100644 tests/wpt/metadata/css/css-backgrounds/background-size-025.html.ini create mode 100644 tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003-ref.html create mode 100644 tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003.html diff --git a/components/layout/display_list/background.rs b/components/layout/display_list/background.rs index e167df9cc4b..1aa8e86453e 100644 --- a/components/layout/display_list/background.rs +++ b/components/layout/display_list/background.rs @@ -19,9 +19,11 @@ use model::{self, MaybeAuto}; use style::computed_values::background_attachment::single_value::T as BackgroundAttachment; use style::computed_values::background_clip::single_value::T as BackgroundClip; use style::computed_values::background_origin::single_value::T as BackgroundOrigin; +use style::computed_values::border_image_outset::T as BorderImageOutset; use style::properties::style_structs::{self, Background}; +use style::values::Either; use style::values::computed::{Angle, GradientItem}; -use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto}; +use style::values::computed::{LengthOrNumber, LengthOrPercentage, LengthOrPercentageOrAuto}; use style::values::computed::{NumberOrPercentage, Percentage, Position}; use style::values::computed::image::{EndingShape, LineDirection}; use style::values::generics::background::BackgroundSize; @@ -784,6 +786,7 @@ pub fn calculate_inner_border_radii( pub fn build_image_border_details( webrender_image: WebRenderImageInfo, border_style_struct: &style_structs::Border, + outset: SideOffsets2D, ) -> Option { let corners = &border_style_struct.border_image_slice.offsets; let border_image_repeat = &border_style_struct.border_image_repeat; @@ -801,8 +804,7 @@ pub fn build_image_border_details( ), }, fill: border_style_struct.border_image_slice.fill, - // TODO(gw): Support border-image-outset - outset: SideOffsets2D::zero(), + outset: outset, repeat_horizontal: border_image_repeat.0.to_layout(), repeat_vertical: border_image_repeat.1.to_layout(), })) @@ -810,3 +812,25 @@ pub fn build_image_border_details( None } } + +fn calculate_border_image_outset_side( + outset: LengthOrNumber, + border_width: Au, +) -> Au { + match outset { + Either::First(length) => length.into(), + Either::Second(factor) => border_width.scale_by(factor), + } +} + +pub fn calculate_border_image_outset( + outset: BorderImageOutset, + border: SideOffsets2D, +) -> SideOffsets2D { + SideOffsets2D::new( + calculate_border_image_outset_side(outset.0, border.top), + calculate_border_image_outset_side(outset.1, border.right), + calculate_border_image_outset_side(outset.2, border.bottom), + calculate_border_image_outset_side(outset.3, border.left), + ) +} diff --git a/components/layout/display_list/builder.rs b/components/layout/display_list/builder.rs index 0860a6f61a0..1d36ab26052 100644 --- a/components/layout/display_list/builder.rs +++ b/components/layout/display_list/builder.rs @@ -16,9 +16,9 @@ use canvas_traits::canvas::{CanvasMsg, FromLayoutMsg}; use context::LayoutContext; use display_list::ToLayout; use display_list::background::{build_border_radius, build_image_border_details}; -use display_list::background::{calculate_inner_border_radii, compute_background_placement}; -use display_list::background::{convert_linear_gradient, convert_radial_gradient}; -use display_list::background::{get_cyclic, simple_normal_border}; +use display_list::background::{calculate_border_image_outset, calculate_inner_border_radii}; +use display_list::background::{compute_background_placement, convert_linear_gradient}; +use display_list::background::{convert_radial_gradient, get_cyclic, simple_normal_border}; use display_list::items::{BaseDisplayItem, BorderDetails, BorderDisplayItem, BLUR_INFLATION_FACTOR}; use display_list::items::{BoxShadowDisplayItem, ClipScrollNode}; use display_list::items::{ClipScrollNodeIndex, ClipScrollNodeType, ClippingAndScrolling}; @@ -1264,6 +1264,18 @@ impl FragmentDisplayListBuilding for Fragment { ); let border_radius = build_border_radius(&bounds, border_style_struct); + let border_widths = border.to_physical(style.writing_mode); + let outset = calculate_border_image_outset( + border_style_struct.border_image_outset, + border_widths + ); + let outset_layout = SideOffsets2D::new( + outset.top.to_f32_px(), + outset.right.to_f32_px(), + outset.bottom.to_f32_px(), + outset.left.to_f32_px(), + ); + let size = bounds.outer_rect(outset).size; let details = match border_style_struct.border_image_source { Either::First(_) => Some(BorderDetails::Normal(NormalBorder { @@ -1295,8 +1307,7 @@ impl FragmentDisplayListBuilding for Fragment { angle_or_corner, gradient.repeating, ), - // TODO(gw): Support border-image-outset - outset: SideOffsets2D::zero(), + outset: outset_layout, }) }, GradientKind::Radial(shape, center, _angle) => { @@ -1308,17 +1319,14 @@ impl FragmentDisplayListBuilding for Fragment { center, gradient.repeating, ), - // TODO(gw): Support border-image-outset - outset: SideOffsets2D::zero(), + outset: outset_layout, }) }, }) }, Either::Second(Image::PaintWorklet(ref paint_worklet)) => { - // TODO: this size should be increased by border-image-outset - let size = self.border_box.size.to_physical(style.writing_mode); self.get_webrender_image_for_paint_worklet(state, style, paint_worklet, size) - .and_then(|image| build_image_border_details(image, border_style_struct)) + .and_then(|image| build_image_border_details(image, border_style_struct, outset_layout)) }, Either::Second(Image::Rect(..)) => { // TODO: Handle border-image with `-moz-image-rect`. @@ -1337,12 +1345,12 @@ impl FragmentDisplayListBuilding for Fragment { UsePlaceholder::No, ) }) - .and_then(|image| build_image_border_details(image, border_style_struct)), + .and_then(|image| build_image_border_details(image, border_style_struct, outset_layout)), }; if let Some(details) = details { state.add_display_item(DisplayItem::Border(Box::new(BorderDisplayItem { base, - border_widths: border.to_physical(style.writing_mode).to_layout(), + border_widths: border_widths.to_layout(), details, }))); } diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json index c9e1fa74b2e..570ee11f310 100644 --- a/tests/wpt/metadata/MANIFEST.json +++ b/tests/wpt/metadata/MANIFEST.json @@ -103651,6 +103651,18 @@ {} ] ], + "css/css-backgrounds/border-image-outset-003.html": [ + [ + "/css/css-backgrounds/border-image-outset-003.html", + [ + [ + "/css/css-backgrounds/border-image-outset-003-ref.html", + "==" + ] + ], + {} + ] + ], "css/css-backgrounds/border-image-repeat-round.html": [ [ "/css/css-backgrounds/border-image-repeat-round.html", @@ -238780,6 +238792,11 @@ {} ] ], + "css/css-backgrounds/border-image-outset-003-ref.html": [ + [ + {} + ] + ], "css/css-backgrounds/border-radius-001-ref.xht": [ [ {} @@ -490958,13 +490975,21 @@ "visual" ], "css/css-backgrounds/border-image-outset-001.htm": [ - "91206118ea44913c07090d59a2a702b8ba3fb6ef", + "796f739d337c442e64c13ffedc25b38c017ac48d", "visual" ], "css/css-backgrounds/border-image-outset-002.htm": [ - "6101a51156146dec7d46599f7b8dc34934d9ea2f", + "9e79efb85575ddc330b69a13265a44bc18723dbd", "visual" ], + "css/css-backgrounds/border-image-outset-003-ref.html": [ + "2679f735e348a77aecd49a1f35794e9fc3a9dd87", + "support" + ], + "css/css-backgrounds/border-image-outset-003.html": [ + "378c9808884010c2e0b0226552b519f3ab4cedce", + "reftest" + ], "css/css-backgrounds/border-image-repeat-001.htm": [ "62ebca7169dbd69684405ec03f86d720fc3354b7", "visual" diff --git a/tests/wpt/metadata/css/css-backgrounds/background-size-025.html.ini b/tests/wpt/metadata/css/css-backgrounds/background-size-025.html.ini deleted file mode 100644 index 4143512af62..00000000000 --- a/tests/wpt/metadata/css/css-backgrounds/background-size-025.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[background-size-025.html] - expected: FAIL diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-001.htm b/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-001.htm index 232fd74c3f32a597f9f6bd1b90c24c3708b2ebb7..db0a8f5f6bb7ecfa034ae0d53f1833e26cc45fc3 100644 GIT binary patch literal 1754 zcmah~ZEw>s5dO}uII<4~X^mILi&oM~upxo8!NiJyPsmBGiM1rQ?919};=glt(zT_X zmQS|tx%Yc6$@7bE=d<6}pP;0=g6kh2FTb2aG!)|J>A4UWvkUn3d3JRPqxb}F$f}Hl z`1Cb`s3bCDAr^~8yf}@uEyV1*Sb8fXuht)jF6hKL<=B?}iprW?YBCQ&HIqiE?I zS7!@8E0qJ{qC!?;cFX5da^bkXp>kcxK+nU|QzbW;srf2EWzFdjq$^mIDl5ZVmllKw zL0Xi6OAb1Bkm5==`8Fuk%h`Vx(3N6Dx4EIm7@dY zft*YjlNdh0pqqmM_u5!=TrLL^>b4?fDt6E%nQ6;H!||x5VAEm97AmJQ-Yu)66>HJT za2JR(5!}mue*IYa@5op7VbJ``{m#w5Y??pJbfxVWQXbRy`?wIv7)B>%3At`lc5X3$ z47kG!)`GV%8o}rZxT{o#-p5lorj-Y_wt5k{));L`6c(}h6OxEcQ$#PHFcON&&h}v? z`o@mojC0+W*3uTL8N<7S(%$OpJ>lP-k{&Uk(PER~&h!1w?Qnmzl}&M=L+hwVCwsoV zp>^0n3~vr%`r!A4o8S`>2CrX~VzVieROhR$Eo7#CS%UGLXEw~42tIBenvD41XIHn( zdIzC#{iu7&zUmp|38iSjOF^5CSxkosa6Q6bSpln6%sWD4CvV{d5-NQ{47eV;Q7yW0ya zl9)}|*_m^F&u#egyJo>p7-$zItzd#m$cH?3x?dOq6& zeY08@*Sb!=*c+`jMH#GNb-Sncwxo=$YkPV_yJ7Do0V&9z+Q^>y{;~1Y^?RVdL-Fiu zf5$%R?~gNE8v2Ub%DXk26!g@st*^Fptl4$DX3aDHAX)e{5dDjaHZ<(1KShm6a*!uH zXvnN3ol#@jPw%Ge>FU=L)tXS-))VAi=5{~xH4=iY*sgou*4J1_cV%x&SY%oc?NBl% zT2Dn6gxy$sBd46&iFV>y(D_hb9p@NpH4tZCl93tgND_P6L3>k(7HtEsWOaHsMctK* z?>ZTatLNCY+?oUF7<)u>DImM)F~`1%ejVu`>Icr>IS2dx9A90zGnDnKE@5>k!i#JK z)1DBjrh8HD?aBU$a;sIHprv;CZNCZbNMhJ^`{p{F%z-qjRHWnim3Me9hJSPsBI!460 z?VeIYCmw{~=f0#&{R_!-P3i$F$-$uP z$h^X+|E^~s5~RahejmErP)ZG%* zPoEX(YuS5I7pTdOq3i?!dik!_bl2w%`l7B%cktIk2Z=%xv2bs%fNYobW zv1@Jk-^<%vmOqiTO#94{z?Z8_1cmXLOx8WSt*B45Khgt!WCNW!(=)Jdg^1KeK_1?; zJ6EJZ?kPu$x7me2mpqjei#VoIlv3OGzrnp&IYvIB;XjJ7f92$r(P+-$a|fgc5WVv&2KNw?!K9M`{u*(%gZmb`On)cD5xso_S=W+PcsNYA-<1hLR`)-;m61M%{2_8Gq@wG z5)$I-a{xg>RF8#NE|<}A6d9X~`B$;>UWVRm`x&~{CQ2y{rZ3_)$f_!}oAfvsUR+#k z>=+CD#0AQ9^Vu#*QHj&p-5t!)(HQ0h!eC)+iZ)c0%rP_#Iivy9*3@We4ZH#}U^K#m zEE|NzDV@Urs{u4xk&DH~Ya6hQQYw897RyN>8!C(qphZlA85!zY9sAGJYd$#NFuVz+_-mUeGBl43Vio>J&=M2%JjM zfwTzP5a6mVRl=EDgVL#bP-!DeUbq?)l_^Y5TjxG4e^Tmxkc2!TKZ9~^WgO}PL?XA zf`c8y3iQbx!`nW>m9)9iV|dedxb=Bt_`9Rz33m`$)Cmqd`;VPfe_o80I`7HMj`MjR ztsUpEHw9bLN0v{KKJU={@1%#m*xvPB>v`g_Xd7fZQpJ9z#tW0K59U-o^__(b&9szy`!(!cHw*!FZ!3N{|Xm1HiMeLR*vUkmM zB{5c`bx|zp12#M=K&8H;9sSeI@$PJ2L%}o_yt}vem2-?cKf)cD#bP5!Ec}0J`UfP* B{Z9Y@ literal 3730 zcmds)*>2N76o$_=67OKjML{A7X%UDLdI7Bj5`~Hu0aqxEoyKaGDo(nn;?;rgpJC$c zaayjB<#@KU{b!kz-@j`1!1nBuy|rWeZilvSk+p1K9cwc>v@iC?KG=KqBipc&Rd~MI zHgk>kpxR^So4sRnz{$v}R<@^nkKod`)EazscHch2L0rUtVCS~u)-O#@nRlDt9yF({ zAKPbsuSU95nR#iGt0l|ErDvmSPe=LH6c+ig>SB_@C#Oi zZw+qZamG#`9&LwZ-D%fCYTtP{=OUyJplCRKGfp&-p(toM`sNZ}bY|$v@ads<#c`-C zM0}o(!nh4$#bnQm#ReE<#ApdW)zRb(B;^Gm7^BleERz)N3yD>JlqQR9=)h@!oCxl9 zY)%|fO>9t1WX=wu(dAU)euZ@&Gq>ShcNQx8ypLx2A7f$4DaDzO;0PpSweaxkEi@c( zBE{D_=c9W(g2&@hG>QtvQ;KD(4NsT}Lsbd+JA$Jyj<7y)5u|ue9m1loL#qhyI+}>_ z6`ocUGLfxpFyQ}y?_~2V@b`fJPx!ph z-RN&%)k{yES47`Kgg#6&bpe5Ieh=r}g}RNvC){H5WJc(wzQSwkJ8j>?gq}e+VxQbq z-N^V?BkY91yc@VieN|T?B;wHxFE6aR*=H$LrKYQuxJbU2GGB+>Q`5T4a@=xyt>U<7 RU+e1a@@UaY_{X_xe*lB(0ha&( diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003-ref.html b/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003-ref.html new file mode 100644 index 00000000000..4d55cddd1cc --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003-ref.html @@ -0,0 +1,23 @@ + + +Blue Box with Green Frame + +
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003.html b/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003.html new file mode 100644 index 00000000000..27bc02682ca --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-backgrounds/border-image-outset-003.html @@ -0,0 +1,22 @@ + + +Background Image Outset + + + +
\ No newline at end of file