Skip to main content

Browse the archive

Revision 03dbbcfeaff26b603303b524dd72f3a948d68b26 authored by Hwanseung Lee on 15 March 2018, 02:29:59 UTC, committed by Blink WPT Bot on 15 March 2018, 02:39:26 UTC 
[css-typed-om] support some properties
 
caption-side[1], isolation[2], unicode-bidi[3], writing-mode[4]
are added to support in whitelist.
and test file are also added.

[1]https://drafts.csswg.org/css-tables-3/#propdef-caption-side
[2]https://drafts.fxtf.org/compositing-2/#propdef-isolation
[3]https://drafts.csswg.org/css-writing-modes-4/#propdef-unicode-bidi
[4]https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode

Bug: 820299
Change-Id: Ic0395565e77363b27ed7f93c861c4258396d766e
Reviewed-on: https://chromium-review.googlesource.com/962562
Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: Hwanseung Lee <hwanseung@chromium.org>
Cr-Commit-Position: refs/heads/master@{#543286}
1 parent 5c32dfb
Raw File
border-image-019.xht 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Backgrounds and Borders Test: border-image shorthand - with border-image-slice &lt;percentage&gt; and border-image-width &lt;number&gt;</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image" title="6.7. Border Image Shorthand: the 'border-image' property" />
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
  <meta name="flags" content="image" />
  <meta name="assert" content="Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red." />

  <style type="text/css"><![CDATA[
  div#test
  {
  border-color: red;
  border-style: solid;
  border-width: 15px 20px 35px 30px;
  border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat;

  /*
  Equivalent to this shorthand form (see border-image-017 test):
  border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;

  or to this shorthand form  (see border-image-018 test):
  border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat;

  or to this shorthand form (see border-image-020 test):
  border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat;
  */

  width: 50px;
  }

  img {vertical-align: top;}

  div#overlapped-red
  {
  background-color: red;
  bottom: 100px;
  height: 100px;
  position: relative;
  width: 100px;
  z-index: -1;
  }
  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div id="test"><img src="support/50x50-green.png" alt="Image download support must be enabled" /></div>

  <div id="overlapped-red"></div>

 </body>
</html>
back to top