Non-breaking Space C2 A0 (U+00A0) Causing Problems With CSS ...

Trang chủ » C2 A0 Vs 20 » Non-breaking Space C2 A0 (U+00A0) Causing Problems With CSS ...

Có thể bạn quan tâm

Copy Summary▾ View ▾ Closed Bug 1384463 Opened 7 years ago Closed 7 years ago non-breaking space C2 A0 (U+00A0) causing problems with CSS Rules Inspector (which shows bogus character  , or shows decl as accepted when it's really rejected) * Summary: non-breaking space C2 A0 (U+00A0) causing problems with CSS Rules Inspector (which shows bogus character  , or shows decl as accepted when it's really rejected) Product: DevTools See Open Bugs in This Product File New Bug in This Product Watch This Product Component: Inspector: Rules See Open Bugs in This Component Recently Fixed Bugs in This Component File New Bug in This Component Watch This Component Version: 54 Branch Platform: Unspecified Unspecified Type: defect Priority: P3 Severity: normal Points: --- Status: RESOLVED FIXED Status: RESOLVED FIXED Mark as Assigned Milestone: Firefox 58 Iteration: --- Project Flags:
a11y-review ---
Accessibility Severity ---
Performance Impact ---
Webcompat Priority ---
Webcompat Score ---
Tracking Flags:
Tracking Status
firefox57 --- fix-optional
firefox58 --- fixed
Tracking Status
relnote-firefox ---
firefox-esr115 --- ---
firefox-esr128 --- ---
firefox57 fix-optional
firefox58 fixed
firefox133 --- ---
firefox134 --- ---
firefox135 --- ---
Assignee: tromey Assignee: Reset Assignee to default Mentors: --- QA Contact: Reset QA Contact to default Reporter: lewiscowles Triage Owner: jdescottes CC: 4 people Depends on: --- Blocks: --- Regressions: --- Regressed by: --- URL: See Also: --- Alias: --- Keywords: --- Whiteboard: --- QA Whiteboard: --- Has STR: --- Change Request: --- Votes: 0 Bug Flags:
behind-pref
firefox-backlog
sec-bounty ?
sec-bounty-hof
in-qa-testsuite
in-testsuite
qe-verify
Signature: None This bug is publicly visible.
Screenshot from 2017-07-26 07-53-07.png 7 years ago lewiscowles 120.18 KB, image/png Details
(ignore this version) 7 years ago Daniel Holbert [:dholbert] 150 bytes, text/html Details
testcase 1 7 years ago Daniel Holbert [:dholbert] 147 bytes, text/html Details
screenshot of "Â" in devtools, when I view testcase 1 locally 7 years ago Daniel Holbert [:dholbert] 130.09 KB, image/png Details
screencast showing bugzilla-hosted "testcase 1" triggering disagreement between "rules" view & computed-style 7 years ago Daniel Holbert [:dholbert] 923.08 KB, video/ogg Details
Bug 1384463 - only trim CSS-allowed whitespace in declaration parser; 7 years ago Tom Tromey :tromey 59 bytes, text/x-review-board-request gl : review+ Details
Bottom ↓ Tags ▾ Timeline ▾ Attached image Screenshot from 2017-07-26 07-53-07.png — Details User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 Steps to reproduce: open https://codepen.io/joao-silva/pen/qjGYpo in browser - CSS backed up to https://pastebin.com/uWSWZitt/raw in case of change Actual results: vertical align for inline-block elements seemed strange. (I've tested this works for any css property with (hex) 20 C2 A0.) It's likely that C2 A0 is not being trimmed, or needs to be replaced with 20 (space). Apologies, I've looked at the FF source code and couldn't make heads or tails of it. Expected results: vertical-align property should have been read in as-is without C2 A0 character (which is not displayed in inspector so can be trimmed). I've also attached an image of chrome, which has the same bug, but because the inspector shows a space, I know it's a character that has not been trimmed. Firefox doesn't seem to show this (indicating it knows to trim for display in inspector, but either chose not to trim in CSS, or has two divergent implementations for white-space trimming)
Kohei Yoshino

Updated

• 7 years ago
Component: Untriaged → CSS Parsing and ComputationProduct: Firefox → Core
Jet Villegas (inactive)

Updated

• 7 years ago
Priority: -- → P3 Attached file (ignore this version) (obsolete) — Details Here's a testcase I made, from copying CSS from your pastebin into a HTML file's <style> block. For me, this actually triggers a devtools bug, where we display the property name as " vertical-align" (note the bogus  character), in addition to rejecting the declaration in the CSS parser. Attached file testcase 1 — Details (Sorry, I think that last one was the wrong version...) Attachment #8914976 - Attachment is obsolete: true
Daniel Holbert [:dholbert]

Updated

• 7 years ago
Attachment #8914976 - Attachment description: testcase 1 → (ignore this version) Odd, the  thing only happens when I view a local copy of the file -- not when I view it hosted on Bugzilla. Anyway, the bugzilla-hosted version is still busted, but in a different way: devtools "rules" view shows the style as being accepted for the .p-card element (it shows "vertical-align: top" just fine, not struck out) -- but if you inspect the computed style for that element, you'll see that it's still stuck at the default value ("baseline"). So devtools and our CSS parser are disagreeing. Which one is correct is a different matter; but they should agree. Attached image screenshot of "Â" in devtools, when I view testcase 1 locally — Details Attached video screencast showing bugzilla-hosted "testcase 1" triggering disagreement between "rules" view & computed-style — Details So there's definitely a devtools bug here, but regarding whether the space should be accepted as valid CSS -- the CSS spec's section on tokenization says: # Only the characters "space" (U+0020), "tab" (U+0009), # "line feed" (U+000A), "carriage return" (U+000D), # and "form feed" (U+000C) can occur in white space. # Other space-like characters [...] are never part of # white space. https://www.w3.org/TR/CSS2/syndata.html It looks like this "C2 A0" character is also known as U+00A0 , per https://en.wikipedia.org/wiki/Non-breaking_space -- and that's not one of the listed U+ characters there. So I think Firefox and Chrome are *correctly* (per spec) parsing it as part of the property-name, and it ends up producing an unrecognized property name (i.e. there is no such property with name "{U+00A0}vertical-align"), and that's why it's rejected and doesn't end up influencing computed style. So the actual rendering behavior is correct. What remains here are two devtools bugs: (1) When the testcase is viewed as a local file, "Â" shows up in rules view (as shown in attachment 8914979 [details]) (2) When the testcase is viewed hosted on Bugzilla, the "vertical-align" declaration is shown as if it's accepted (but really it's not, as can be seen in compute style, and it should be struck out) Migrating this bug to devtools component to cover those areas.Component: CSS Parsing and Computation → Developer Tools: CSS Rules InspectorProduct: Core → Firefox
Daniel Holbert [:dholbert]

Updated

• 7 years ago
Status: UNCONFIRMED → NEWEver confirmed: trueSummary: non-breaking space C2 A0 causing problems with CSS → non-breaking space C2 A0 causing problems with CSS Rules Inpsector
Daniel Holbert [:dholbert]

Updated

• 7 years ago
Summary: non-breaking space C2 A0 causing problems with CSS Rules Inpsector → non-breaking space C2 A0 (U+00A0) causing problems with CSS Rules Inspector (which shows bogus character  , or shows decl as accepted when it's really rejected)
Patrick Brosset <:pbro>

Updated

• 7 years ago
status-firefox57: --- → fix-optional (In reply to Daniel Holbert [:dholbert] from comment #6) > (1) When the testcase is viewed as a local file, "Â" shows up in rules view > (as shown in attachment 8914979 [details]) In this case I see a warning in the console: > The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. So while this still isn't great, it's also somewhat expected. The bug is here: https://dxr.mozilla.org/mozilla-central/rev/20d57b9c4183973af4af5e078dff2aec0b74f928/devtools/shared/css/parsing-utils.js#313 At this spot, the non-breaking space is stripped from the property name. There are actually two such spots; and removing the ".trim()" does the right thing. However I wonder if the non-breaking space here should somehow be shown more clearly. It's not totally obvious why " vertical-align" is crossed out. I think it's better to have it crossed out than to wait for some better UI. So I'm going to fix this and perhaps file a follow-up to make the styling better.Assignee: nobody → ttromey Attached file Bug 1384463 - only trim CSS-allowed whitespace in declaration parser; — Details Review commit: https://reviewboard.mozilla.org/r/191296/diff/#index_header See other reviews: https://reviewboard.mozilla.org/r/191296/ Attachment #8920271 - Flags: review?(gl) Hello, I raised this bug because someone learning to code for the web showed me something, and it wasn't apparently obvious what had gone wrong. While I accept that it defies standards and the spec prevents the definition of the character bytes as whitespace, it is a weird bug (first time in over 15 years I've noticed it). While I may know enough to visit a hex-editor to describe, I'm guessing others may simply give up and be lost to the web, or unnecessarily struggle. Crossing out a property really should come with a warning that on hover says something like "invalid property name", or finds some alternative representation for displaying the character to signify to the user that this is not a usual space character (which it looks like in most text-editors). I really appreciate everyone time to try to approach this. Comment on attachment 8920271 [details] Bug 1384463 - only trim CSS-allowed whitespace in declaration parser; https://reviewboard.mozilla.org/r/191296/#review196494 ::: devtools/shared/css/parsing-utils.js:253 (Diff revision 1) > offsets: [undefined, undefined], > colonOffsets: false}; > } > > /** > + * Like trim, but only trims CSS whitespace. s/CSS/CSS-allowed for better clarity ::: devtools/shared/css/parsing-utils.js:264 (Diff revision 1) > + } > + return str; > +} > + > +/** > + * Like trimRight, but only trims CSS whitespace. Same as above. Attachment #8920271 - Flags: review?(gl) → review+ Comment on attachment 8920271 [details] Bug 1384463 - only trim CSS-allowed whitespace in declaration parser; Review request updated; see interdiff: https://reviewboard.mozilla.org/r/191296/diff/1-2/ (In reply to lewiscowles from comment #12) > Crossing out a property really should come with a warning that on hover says > something like "invalid property name", or finds some alternative > representation for displaying the character to signify to the user that this > is not a usual space character (which it looks like in most text-editors). I filed a follow-up bug to deal with the message and perhaps calling out the non-breaking space. It is bug 1410423. Pushed by ttromey@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/96703e5d9e78 only trim CSS-allowed whitespace in declaration parser; r=gl https://hg.mozilla.org/mozilla-central/rev/96703e5d9e78Status: NEW → RESOLVEDClosed: 7 years ago status-firefox58: --- → fixedResolution: --- → FIXEDTarget Milestone: --- → Firefox 58
BMO Automation

Updated

• 6 years ago
Product: Firefox → DevTools You need to log in before you can comment on or make changes to this bug. Top ↑

Attachment

Hide Details

General

Creator: lewiscowles Created: Updated: Size:

Description

File Name

Content Type

Raw Diff Splinter Review

Từ khóa » C2 A0 Vs 20