New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 600039 link

Starred by 1 user
Status: Duplicate
Merged: issue 505151
Owner:
xing...@intel.com
Closed: Jan 2017
Cc:
xing...@intel.com
kojii@chromium.org
e...@chromium.org
█ wkorman@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug



Sign in to add a comment

Incorrect position of vertical-rl block with border

Project Member Reported by wangxianzhu@chromium.org, Apr 2 2016 
<div style="
  writing-mode: vertical-rl;
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
  border: 20px solid red">
</div>

Expected: The box is placed at top-left corner of the page.

Actual: The box is placed with a horizontal offset of 2 * border-width.

The test is good in Firefox.

Comment 1 by kojii@chromium.org, Apr 18 2016 

Relaying comments from Gérard:
- - - - - - - -

Tests
-----

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/Issue600039-Incorrect-position-vrl-block-with-border-001.html

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/Issue600039-Incorrect-position-vrl-block-with-border-002.html


Expected result
---------------

http://www.gtalbot.org/BrowserBugsSection/CSS3WritingModes/ref-filled-green-100px-square.xht

This reference file declares
strong {line-height: 20px;}
on purpose, deliberately because WebKit-based browsers do not render line-height of inline bolded text any taller (Firefox does this).

In all fairness,  Issue 600039  is a sub-category of Issue 505151 but since we did not create test with horizontal borders, then  Issue 600039  should *not* be merged with Issue 505151.

Comment 2 by xing...@intel.com, Nov 22 2016 

This seems like regression. On Ubuntu 1404:
Version 47.0.2526.106 (64-bit): Not reproduced.
Version 56.0.2917.0 (64-bit): Reproduced.

Comment 3 by kojii@chromium.org, Nov 22 2016 

I guess 47 didn't have unprefixed. Can you try with "-webkit-writing-mode"?

Comment 4 by xing...@intel.com, Nov 24 2016 

For the following case, both webkit-writing-mode and writing-mode behave the same on 47: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
  html
    {
      background: white url("support/100x100-red.png") no-repeat 8px 8px;
    }
  div#test-overlapping-green
    {
      border-left: green solid 100px;
      height: 100px;
      left: 8px;
      position: absolute;
      top: auto;
      webkit-writing-mode: vertical-rl;
    }
  </style>
 </head>
  <!-- 
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 
  -->
  <div id="test-overlapping-green"></div>

 </body>
</html>

Comment 5 Deleted

Comment 6 by wangxianzhu@chromium.org, Nov 26 2016 

Re #4: You probably missed '-' before 'webkit-writing-mode' causing it to have no effect.

Comment 7 by xing...@intel.com, Dec 19 2016

Cc: xing...@intel.com

Comment 8 by xing...@intel.com, Dec 19 2016 

yes, after adding "-", it is reproduced on 47. Sorry for the noise
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
  html
    {
      background: white url("support/100x100-red.png") no-repeat 8px 8px;
    }
  div#test-overlapping-green
    {
      border-left: green solid 100px;
      height: 100px;
      left: 8px;
      position: absolute;
      top: auto;
      -webkit-writing-mode: vertical-rl;
    }
  </style>
 </head>
  <!-- 
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 
  -->
  <div id="test-overlapping-green"></div>

 </body>
</html>

Comment 9 Deleted

Comment 10 by xing...@intel.com, Dec 20 2016 

I am a little confused by the border-left.
With the following test on Firefox, no matter vertical-lr added or not, border keeps displayed at the left side. Per my understanding, once vertical, it should be displayed at the bottom(below string "This is some text in a paragraph."). 

So, it seems writing mode has no influence on borders? Any spec about this?

Test case:
Vertical LR:
https://jsfiddle.net/r8scysvs/
Top-Bottom:
https://jsfiddle.net/4hvq2qrn/
border left JSFiddle.png
3.8 KB View Download
border left vrl JSFiddle.png
8.9 KB View Download

Comment 11 by xing...@intel.com, Dec 21 2016 

Got answer from this:https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BbrSf6oyHYM

Case: http://jsfiddle.net/xuxing/1sdeg3d7/

Summary:
border-start/end/before/after works with writing mode.
boder-left/right/top/bottom has nothing to do with writing mode.

Comment 12 by xing...@intel.com, Dec 21 2016

Owner: xing...@intel.com
Status: Assigned (was: Available)

Comment 13 by xing...@intel.com, Dec 21 2016

Status: Started (was: Assigned)

Comment 14 by kojii@chromium.org, Jan 9 2017

Mergedinto: 505151
Status: Duplicate (was: Started)
Gérard suggested me that this is a dup of issue 505151, so I'm following his advise.
►

Sign in to add a comment