Implement css resize property behaviour

RESOLVED FIXED

Status

()

Core
CSS Parsing and Computation
RESOLVED FIXED
8 years ago
5 years ago

People

(Reporter: Neil Deakin (mostly unavailable until September), Assigned: Neil Deakin (mostly unavailable until September))

Tracking

({dev-doc-complete})

Trunk
dev-doc-complete
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(blocking2.0 beta2+)

Details

(URL)

Attachments

(1 attachment)

Currently, in bug 442228, we implement -moz-resize which allows elements to be resizable. However, this is implemented just by changing the width/height style or attributes. The css 'resize' property requires that some internal scaling factor be used instead.
Depends on: 442228
Duplicate of this bug: 555024
So it looks like Safari is just setting style.width and style.height as we do, but using the 'resize' property. (as well as, oddly, all four margin properties) Maybe we should just use 'resize' instead of '-moz-resize' anyway and just make changing style.width and style.height the right way.
Reading the spec, the only place where our implementation is against it is that we don't reset the resize factor to 1.0 when the resize property is changed.  Here is an eample:

data:text/html,<textarea></textarea><script>setTimeout(function(){document.querySelector("textarea").style.MozResize="none";},5000);</script>

I think we can rename the property once we solve this.  We don't actually need to store a resize factor, we can just store the original computed width and height and then reset the dimensions when the resize property changes.

That said, I tested this in Chrome, and it has the same bug.

Comment 4

8 years ago
Sounds good to me. One thing that that struck me is that having a function to automatically switch back to the original size would be useful, as it might break the layout if it's resized in any way (and finding the original size manually, might be hard). We have a few options if we want to do that, that I can think of:

1. As soon as the resizer is used to change the size, a new option appears in the right-click menu of the form, or perhaps only the resizer itself.
2. Doubleclicking the resizer-grip restores the original size.

Out of these two, I prefer the second one, if only one had to be chosen, but a right-click menu option would be good to complete it.

No matter what, though, it probably belongs in a new bug. What do you think?

Comment 5

8 years ago
I think this blocks 1.9.3 because resizable text boxes need resize: none on lots of sites. See facebook.com and twitter.com, for example.
blocking2.0: --- → beta1+

Comment 6

8 years ago
I found bug 555482 just now, and has posted my last comment in there, instead.
Blocks: 555482
(In reply to comment #5)
> I think this blocks 1.9.3 because resizable text boxes need resize: none on
> lots of sites. See facebook.com and twitter.com, for example.

How does switching the mechanism we use for the resizing away from changing style.width and height affect these sites?
So if we're confident we're compatible with Safari, and Safari uses 'resize' rather than something prefixed, then I think it's fine for us to drop the prefix as well, since it's not spoiling any ability that the working group has to change the spec.
Bumping this to beta2 per beta re-triage with dbaron and sayre.  If this should indeed block beta1, please re-nom.
blocking2.0: beta1+ → beta2+
Assignee: nobody → enndeakin
Created attachment 455740 [details] [diff] [review]
change -moz-resize to resize
Attachment #455740 - Flags: review?(dbaron)
Comment on attachment 455740 [details] [diff] [review]
change -moz-resize to resize

r=dbaron
Attachment #455740 - Flags: review?(dbaron) → review+
http://hg.mozilla.org/mozilla-central/rev/c1bb84d2470d
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Flags: in-testsuite+
Resolution: --- → FIXED

Updated

7 years ago
Keywords: dev-doc-needed
Updated
<https://developer.mozilla.org/en/HTML/Element/textarea>
<https://developer.mozilla.org/en/Firefox_4_for_developers>
<https://developer.mozilla.org/en/Mozilla_CSS_support_chart>
<https://developer.mozilla.org/en/CSS/resize>
<https://developer.mozilla.org/en/CSS/-moz-resize>
Keywords: dev-doc-needed → dev-doc-complete
Duplicate of this bug: 577455

Comment 15

7 years ago
When I re-size the field that says: "What 's on Your mind?" in it, placed near the top of the page in Facebook.com, a large part of the page appears in blank and if I re-size the field to the left, the drag indicator gets to the middle of It. Is this bug about the one reported in here?

Updated

5 years ago
Depends on: 773741
You need to log in before you can comment on or make changes to this bug.