Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't evaluate html and css. #66

Open
proofit404 opened this issue Feb 21, 2016 · 7 comments
Open

Can't evaluate html and css. #66

proofit404 opened this issue Feb 21, 2016 · 7 comments

Comments

@proofit404
Copy link

Hello.

First of all thanks for awesome project. I have some troubles with skewer-html-mode and skewer-css-mode.

skewer-html-mode issue

Steps to reproduce:

  • open test.html
  • buffer content is
<table>
  | <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
  • | character signify point position
  • M-x run-skewer
  • Skewer tab pops up
  • Press C-M-x
  • Whole <table>...</table> region highlighted
  • Expected result - table appears is the skewer tab
  • Actual result - <body> tag inner html steal empty.

skewer-css-mode issue

Suppose we have following css file

body {
    background-color: red;
}

If I press C-M-x whole buffer highlighter for a second but style doesn't applied to the skewer tab.

Browser version

Firefox 43.0.

There is no problem with javascript code evaluation. I can modify page html with js code and result appears immediately in the browser. Am I doing something wrong?
@proofit404
Copy link
Author

Looks like I find the reason of this problem. Here is skewer page body right after run-skewer command:

skewer01

  • Given html buffer bellow with | signifying point:
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/test.css">
        <title>Test page</title>
    </head>
    <body>
        <h1>This is a table (c) K.O.</h1>
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>|
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </body>
</html>

After I press C-M-x at given position skewer page content turns into this structure:

skewer02

Here real head tag gets new children tag and whole body inside it.

  • Given html buffer below:
<body>
    <h1>This is a table (c) K.O.</h1>
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>|
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

After I press C-M-x skewer page structure turns into this:

skewer03

Table was wrongly inserted into header so we got "C" header on page.

  • Given following html buffer:
<body>
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>|
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

We got correct result for this buffer:

skewer04

  • Given html buffer below:
<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Result so far:

skewer05

Nothing happens. I don't know if this is skewer.fn.html related or sgml-mode related bug. My emacs version is 25.0.91.2. Here is ancestries for each situation above:

  • (("" 1) ("head" 1) ("body" 1) ("h1" 1) ("table" 1) ("tr" 1) ("td" 1) ("td" 1) ("td" 1))
  • (("body" 1) ("h1" 1) ("table" 1) ("tr" 1) ("td" 1) ("td" 1) ("td" 1))
  • (("body" 1) ("table" 1) ("tr" 1) ("td" 1) ("td" 1) ("td" 1))
  • (("table" 1) ("tr" 1) ("td" 1) ("td" 1) ("td" 1))

Hope this help.

@proofit404
Copy link
Author

Also if I count ancestries with html-mode instead web-mode enabled it got absolutely different values:

  • (("body" 1) ("table" 1) ("tr" 1))
  • (("body" 1) ("table" 1) ("tr" 1))
  • (("body" 1) ("table" 1) ("tr" 1))
  • (("table" 1) ("tr" 1))

for each case correspondingly.

@skeeto
Copy link
Owner

skeeto commented Feb 24, 2016

You need a complete HTML document (html and body) in your buffer in
order to evaluate tags. The content will inserted/replaced at the
structurally equivalent place in the DOM.

@proofit404
Copy link
Author

So it looks like expected behaviour. I guess this issue maybe reformulated as "web-mode isn't supported" since first example does have full html.

@stardiviner
Copy link

I can't get the result display in skewer demo tab in Chrome.

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Hello, world!</p>|
  </body>
</html>

I put cursor at |. And press [C-M-x]. Also I tried behind all other tags with [C-M-x]. Nothing changed.

Just saw a log in Chrome console:

XHR finished loading: POST "http://127.0.0.1:8080/skewer/post".

I found there are many others code in page source code, some are from Chrome extensions.
I don't know whether they affect the result displaying.

@skeeto
Copy link
Owner

skeeto commented Mar 6, 2016

Like C-M-x in other modes, put the cursor inside to form you want to
evaluate, then press C-M-x. With the cursor at the shown position, it
would evaluate the body tag, but this isn't allowed since JavaScript
doesn't allow the body tag itself (nor head) to be replaced. It should
have displayed a warning, even if no browser was attached, if you're in
skewer-html-mode minor mode and you do that.

@stardiviner
Copy link

I see, thanks, It work as I expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@skeeto @stardiviner @proofit404